/** Shopify CDN: Minification failed

Line 43:16 Expected identifier but found whitespace
Line 43:18 Unexpected "{"
Line 43:27 Expected ":"
Line 43:55 Expected ":"
Line 63:12 Expected identifier but found whitespace
Line 63:14 Unexpected "{"
Line 63:23 Expected ":"
Line 63:53 Expected ":"
Line 64:8 Expected identifier but found whitespace
Line 64:10 Unexpected "{"
... and 1 more hidden warnings

**/
/* Base Styles */
.custom-image-grid {
  max-width: 1200px;
  margin: 0 auto;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat({{ section.settings.columns }}, 1fr); /* Dynamic columns based on settings */
  gap: 20px;
}

.image-block {
  text-align: center;
  position: relative;
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.main-image,
.hover-image {
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
  border-radius: {{ section.settings.border_radius }}px; /* Dynamically set border radius */
}

.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.image-block:hover .main-image {
  opacity: 0;
}

.image-block:hover .hover-image {
  opacity: 1;
}

.image-title {
  margin-top: 10px;
  font-size: {{ section.settings.title_font_size }}px; /* Dynamically set font size */
  color: {{ section.settings.title_color }}; /* Dynamically set title color */
}

/* Remove underline from hyperlink */
.image-link {
  text-decoration: none;
}

/* Desktop Layout - 1 Row, Max 4 Columns */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr); /* Maximum of 4 columns */
  }
}

/* Mobile Layout: Stack */
@media (max-width: 768px) {
  .grid-container[data-mobile-layout="stack"] {
    grid-template-columns: repeat(2, 1fr); /* Two blocks per column */
  }

  .grid-container[data-mobile-layout="carousel"] {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .grid-container[data-mobile-layout="carousel"] .image-block {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Carousel Arrows */
  .carousel-arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
  }

  .arrow {
    font-size: 24px;
    color: black;
    background-color: transparent;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    padding: 10px;
    z-index: 20;
  }

  .arrow.prev {
    left: 10px;
  }

  .arrow.next {
    right: 10px;
  }
}