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

.gallery-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(
        220px,
        220px
      )
    );

  justify-content:center;

  gap:24px;

}

.gallery-item{

  cursor:pointer;

  overflow:hidden;


  aspect-ratio:4/5;

  overflow:hidden;

}

.gallery-item img{

  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

}

/* ========================================
Card
======================================== */

.gallery-card-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        320px,
        1fr
      )
    );

  gap:32px;

}

.gallery-card img{

  width:100%;

  aspect-ratio:4/3;

  object-fit:cover;

  display:block;

}

.gallery-card-body{

  padding:24px;

}

.gallery-card-body p{

  margin-bottom:16px;

  line-height:1.8;

}

.gallery-card-body a{

  display:inline-block;

  text-decoration:none;

}

/* ========================================
Swiper
======================================== */

.gallery-swiper{

  overflow:hidden;

}

.gallery-swiper .swiper-slide{

  width:360px;

}

.gallery-slider-image{

  aspect-ratio:3/4;

  overflow:hidden;

}

.gallery-slider-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}

/* ========================================
Slider
======================================== */

.gallery-slider{

  display:flex;

  gap:24px;

  overflow-x:auto;

  scroll-snap-type:x mandatory;

  padding-bottom:12px;

}

.gallery-slider-item{

  flex:0 0 320px;

  scroll-snap-align:start;

}

.gallery-slider-image{

  aspect-ratio:4/5;

  overflow:hidden;

}

.gallery-slider-image img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}

/* ========================================
Modal
======================================== */

.gallery-modal{

  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  z-index:9999;

  padding:40px;

}




.gallery-modal img,
.gallery-modal-close{

  position:relative;

  z-index:2;

}

.gallery-modal img{

  max-width:90vw;

  max-height:90vh;

  width:auto;

  height:auto;

  display:block;

}

.gallery-modal-close{

  position:fixed;

  top:24px;

  right:24px;

  width:56px;

  height:56px;

  border:none;

  display:flex;

  align-items:center;

  justify-content:center;

  cursor:pointer;

  z-index:10000;

}

/* ========================================
SP
======================================== */

@media(max-width:768px){

  .gallery-grid{

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

    gap:12px;

  }

  .gallery-card-grid{

    grid-template-columns:1fr;

    gap:20px;

  }

  .gallery-slider-item{

    flex:0 0 280px;

  }

  .gallery-modal{

    padding:16px;

  }

  .gallery-modal img{

    max-width:100%;

    max-height:80vh;

  }

  .gallery-modal-close{

    top:12px;

    right:12px;

    width:44px;

    height:44px;

  }

}