/**
 * =========================================================
 * 파일명 : gallery.css
 * 위치 : /www/assets/css/pages
 * ---------------------------------------------------------
 * 목적
 * - 현장 갤러리
 * =========================================================
 */

/* =========================
   Gallery
========================= */

.gallery{

    background:var(--color-background);

}

/* =========================
   Grid
========================= */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

/* =========================
   Item
========================= */

.gallery-item{

    display:block;

    overflow:hidden;

    border-radius:16px;

    background:#f5f5f5;

    box-shadow:var(--shadow-sm);

    transition:var(--transition-fast);

}

.gallery-item:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

/* =========================
   Image
========================= */

.gallery-item img{

    display:block;

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:transform .35s ease;

}

.gallery-item:hover img{

    transform:scale(1.05);

}

/* =========================
   Desktop
========================= */

@media (min-width:992px){

    .gallery-grid{

        grid-template-columns:repeat(4,1fr);

        gap:20px;

    }

}