/* Warm Color Palette */
:root {
    --warm-background: #fdf8f5; /* Very light, creamy background */
    --warm-card-bg: #ffffff;    /* White for card background */
    --warm-text-color: #5c4033; /* Dark brown for text */
    --warm-heading-color: #8b4513; /* Saddle brown for headings */
    --warm-accent-color: rgba(210, 180, 140, 0.1); /* Tan for subtle accents (used in overlay) */
    --warm-shadow: rgba(0, 0, 0, 0.08); /* Soft shadow */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Slightly warmer font */
    margin: 0;
    padding: 25px; /* Slightly more padding */
    background-color: var(--warm-background);
    color: var(--warm-text-color);
    line-height: 1.6;
}

.gallery-container {
    max-width: 1000px; /* Slightly wider container */
    margin: 0 auto;
    background-color: var(--warm-card-bg);
    padding: 30px; /* More internal padding */
    box-shadow: 0 5px 15px var(--warm-shadow); /* Softer, larger shadow */
    border-radius: 12px; /* More rounded corners */
}

h1 {
    text-align: center;
    color: var(--warm-heading-color);
    margin-bottom: 40px; /* More space below heading */
    font-size: 2.5em; /* Slightly larger heading */
    letter-spacing: 1px; /* A little spacing for warmth */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05); /* Subtle text shadow */
}

.my-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid, min size for thumbnail width */
    gap: 20px; /* Space between images */
    /* Ensure grid items don't stretch vertically more than needed */
    align-items: start; /* Align items to the start of their grid cell */
}

.my-gallery a {
    display: block; /* Important: makes the link a block element */
    overflow: hidden; /* Hides any content that overflows the element's box */
    border-radius: 8px; /* More rounded corners for thumbnails */
    box-shadow: 0 2px 8px var(--warm-shadow); /* Softer shadow for thumbnails */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    text-decoration: none;
    position: relative; /* For potential overlay effects */
    /* Set height to match the image height, ensuring the container is not taller */
    height: 100px; /* Explicitly set height to match img height */
}

.my-gallery a:hover {
    transform: translateY(-8px) scale(1.02); /* More pronounced lift and slight scale on hover */
    box-shadow: 0 8px 20px var(--warm-shadow); /* Enhanced shadow on hover */
}

.my-gallery img {
    width: 100%;
    height: 100%; /* Make image fill 100% of its parent <a>'s height */
    object-fit: cover; /* Ensures images cover the area without distortion */
    display: block;
    transition: opacity 0.3s ease-in-out;
    /* Remove any default margin that might cause spacing */
    margin: 0;
    padding: 0;
}

.my-gallery img:hover {
    opacity: 0.9; /* Slightly less opaque on hover */
}

/* Optional: Add a subtle overlay on hover for a more polished look */
.my-gallery a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--warm-accent-color); /* Warm, semi-transparent overlay */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 8px;
    pointer-events: none; /* Allows clicks to pass through */
}

.my-gallery a:hover::before {
    opacity: 1;
}

/* Basic responsiveness for very small screens */
@media (max-width: 600px) {
    .my-gallery {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* Even smaller on tiny screens */
        gap: 10px;
    }
    .my-gallery a {
        height: 80px; /* Adjust <a> height for tiny screens */
    }
    .my-gallery img {
        height: 100%; /* Image still fills 100% of parent <a> */
    }
}