*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Times New Roman", Times, serif;
}

body{
    background:#f4f6f9;
}

.stg11{
    font-family:'Pacifico', cursive;
    
}

/* TITLE */
.gallery-title{
    background:#00a8e8;
    color:white;
    padding:35px 15px;
    text-align:center;
    font-size:36px;
    font-weight:600;
}

/* GALLERY GRID */
.gallery{
    padding:40px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:30px;
    justify-items:center; /* center cards */
}

/* IMAGE CARD */.photo{
    background:white;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
    padding:10px;
    transition:transform .3s ease;
}

.photo:hover{
    transform:translateY(-6px);
}

.photo img{
    width:auto;
    height:auto;
    max-width:200px;   /* control size but no cut */
    max-height:260px;  /* control size but no cut */
    display:block;
}





/* =========================
   RESPONSIVE FIX
   ========================= */

/* Large Tablets & Small Laptops */
@media (max-width: 1024px) {
    .gallery {
        padding: 25px;
        gap: 20px;
        grid-template-columns: repeat(4, 1fr);
    }

    .photo img {
        max-width: 180px;
        max-height: 230px;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .gallery {
        padding: 18px;
        gap: 16px;
        grid-template-columns: repeat(3, 1fr);
    }

    .photo img {
        max-width: 160px;
        max-height: 210px;
    }
}

/* Mobile Phones */
@media (max-width: 576px) {

    /* Title */
    .gallery-title {
        font-size: 22px;
        padding: 18px 10px;
    }

    /* Gallery Grid – 3 Columns on Mobile */
    .gallery {
        padding: 12px;
        gap: 12px;
        grid-template-columns: repeat(4, 1fr);
    }

    /* Card */
    .photo {
        padding: 6px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }

    /* Image */
    .photo img {
        width: 100%;
        max-width: 100%;
        max-height: 140px;
        margin: auto;
    }

    /* Disable hover lift on mobile */
    .photo:hover {
        transform: none;
    }

    /* Touch feedback */
    .photo:active {
        transform: scale(0.96);
    }
}