/* ==========================================================================
   GALLERY PAGE
   ========================================================================== */

.gallery-section {
  padding: 64px 0 96px !important;
}

.nail-gallery-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.nail-gallery-flex>.col {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  height: 100% !important;
}

.nail-gallery-flex .col-inner,
.nail-gallery-flex .box,
.nail-gallery-flex .box-image,
.nail-gallery-flex img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.nail-gallery-flex .box,
.nail-gallery-flex .box-image,
.nail-gallery-flex .col-inner,
.nail-gallery-flex a {
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nail-gallery-flex .box-image::before,
.nail-gallery-flex .box::before {
  display: none !important;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

/* Desktop */

@media screen and (min-width: 1025px) {
  .nail-gallery-flex>.col {
    min-width: calc((100% - 24px*3)/4) !important;
    max-height: 240px;
    aspect-ratio: 282/240;
  }
}

/* Tablet */

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .gallery-section {
    padding: 48px 0 64px !important;
  }

  .nail-gallery-flex {
    gap: 20px !important;
  }

  .nail-gallery-flex>.col {
    min-width: calc((100% - 20px)/2) !important;
    aspect-ratio: 359/340;
    max-height: 340px !important;
  }
}

/* Mobile */

@media screen and (max-width: 767px) {
  .gallery-section {
    padding: 32px 0 48px !important;
  }

  .nail-gallery-flex {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px !important;
  }

  .nail-gallery-flex>.col {
    min-width: 100% !important;
    aspect-ratio: 1;
  }
}