/* GLOBAL STYLES */
body {
    font-family: sans-serif; /* Use a clean, readable font */
    background-color: #ffffff; /* Or whatever background color you prefer */
    color: #333;
    margin: 0; /* Remove default browser margin */
    padding: 20px;
}

/* TEXT ALIGNMENT */
.content-section {
    text-align: center; /* Center the title and poem */
    max-width: 1000px; /* Optional: Constrain the width of the text */
    margin: 0 auto 50px auto; /* Center the section and add space below */
}

/* TITLE AND POEM STYLES */
h1 {
    font-size: 2.5em; /* Large title */
    margin-bottom: 0.5em;
}

.poem p {
    margin: 0; /* Remove space between poem lines */
    line-height: 1.1;
    font-size: 1em;
}

/* IMAGE GRID LAYOUT (The most important part for the images) */
.image-grid {
    display: grid;
    /* This creates a responsive grid that fits as many columns as possible */
    /* The columns will be a minimum of 200px wide and a maximum of 1 fraction unit */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px; /* Spacing between the images/gifs */
    max-width: 1200px; /* Optional: Control the maximum width of the entire grid */
}

.image-grid img {
    width: 100%; /* Make each image fill its grid cell */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Removes any extra space below images */
    object-fit: cover; /* Ensures the image covers the area without distortion */
}

/* OPTIONAL: To mimic the appearance of the uploaded image */
.image-grid img {
    /* These styles can help create the box-like look */
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    background-color: #f8f8f8; /* Placeholder background */
}