/** Shopify CDN: Minification failed

Line 35:25 Expected ":"
Line 37:22 Expected ":"

**/
/*
 * This file contains the critical layout styles for the Flex Media Gallery section.
 * It has been moved from flex-gallery.liquid to be preloaded in theme.liquid
 * to fix LCP and CLS issues.
 */

.flex-media-3 .flex-media-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px; 
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}
.flex-media-3 .media-block {
  flex: 1 1 220px;
  max-width: 220px; 
  text-align: center;
}
.flex-media-3 a {
  text-decoration: none !important;
}

/* === CLS FIX #1: APPLIES TO THE IMAGE CONTAINER === */
.flex-media-3 .media-img-link,
.flex-media-3 .media-block > img {
  display: block !important; /* Forces it to be a block */
  aspect-ratio: 1 / 1;      /* Reserves a 1:1 square */
  border-radius: 8px;
  overflow: hidden;         /* Hides any overflow */
}

/* === CLS FIX #2: APPLIES TO THE IMAGE ITSELF === */
.flex-media-3 .media-block img {
  width: 100%;
  /* height: 100%; <-- This line removed to fix layout conflict */
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.flex-media-3 .media-caption strong {
  font-size: 14px !important;
  font-weight: 600;
  color: #24678d !important;
}

/* === CLS FIX #3: RESERVES SPACE FOR THE TEXT === */
.flex-media-3 .media-caption {
  display: block;
  margin-top: 15px;
  min-height: 2.2em; /* Reserves space for the text */
}

@media (max-width: 749px) {
  .flex-media-3 .flex-media-wrapper {
    flex-wrap: wrap; 
    justify-content: center;
    gap: 15px; 
    padding: 0 5px; 
  }
  .flex-media-3 .media-block {
    flex: 1 1 28%; 
  }
}