/* CSS for Grid background image section */
.acf-layout-grid-background-image-section {
  padding: 80px 0;
  position: relative;
  width: 100%;
  background-color: #fff;
}

.acf-layout-grid-background-image-section .header-row {
  margin-bottom: 0;
}

.grayscale-image-banner {
  width: 100%;
  aspect-ratio: 1200 / 570;
  position: relative;
}

.grid-item {
  position: absolute;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Positioning based on custom properties */
  left: calc(var(--left) * 1%);
  top: calc(var(--top) * 1%);
  width: calc(var(--width) * 1%);
  height: calc(var(--height) * 1%);
}

.grid-item::before {
  content: "";
  position: absolute;
  /* Shared background positioning formula */
  left: calc(-1% * var(--left) / var(--width) * 100);
  top: calc(-1% * var(--top) / var(--height) * 100);
  width: calc(100% * 100 / var(--width));
  height: calc(100% * 100 / var(--height));

  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  transition:
    filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

.grid-item:hover {
  z-index: 2;
}

/* Content inside the grid item */
.grid-item > div {
  position: relative;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}

/* Black overlay */
.grid-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Hover only in desktop*/
@media (min-width: 992px) {
  .grid-item:hover::after {
    opacity: 0.5;
  }

  .grid-item:hover > div {
    opacity: 1;
    visibility: visible;
  }
}

.grid-item {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px 0 60px;
}
.item-5 .box-heading,
.item-6 .box-heading {
  margin-bottom: 10px;
  padding-top: 20px;
}

.grid-item .box-heading {
  font-family: var(--font-clash-display);
}

/* 
  Desktop Coordinates (aspect-ratio: 1200 / 570)
  Horizontal gap = 0.65% of width
  Vertical gap = 1.37% of height (equal to 0.65% of width)
*/
.item-1 {
  --left: 0;
  --top: 0;
  --width: 32.9;
  --height: 49.3;
  border-top-right-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-bottom-right-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-bottom-left-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
}
.item-2 {
  --left: 33.55;
  --top: 0;
  --width: 32.9;
  --height: 49.3;
  border-top-left-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-bottom-right-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-bottom-left-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
}
.item-3 {
  --left: 67.1;
  --top: 0;
  --width: 32.9;
  --height: 55.5;
  border-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
}
.item-4 {
  --left: 0;
  --top: 50.7;
  --width: 32.9;
  --height: 49.3;
  border-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
}
.item-5 {
  --left: 33.55;
  --top: 50.7;
  --width: 32.9;
  --height: 24;
  border-top-right-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-bottom-left-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
}
.item-6 {
  --left: 33.55;
  --top: 76;
  --width: 32.9;
  --height: 24;
  border-top-left-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-top-right-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-bottom-right-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
}
.item-7 {
  --left: 67.1;
  --top: 56.9;
  --width: 32.9;
  --height: 43.1;
  border-top-left-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
  border-bottom-right-radius: clamp(0.875rem, -0.0455rem + 4.0909vw, 3.125rem);
}

.grid-background-primary-btn {
  background-color: #2c2d2d !important;
  color: #faf0dc !important;
  min-width: fit-content !important;
  gap: 12px;
}

.mobile-grid-content-block {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .acf-layout-grid-background-image-section {
    padding: 50px 0;
  }
  .grayscale-image-banner {
    aspect-ratio: 340 / 100px;
  }

  /* 
    Mobile Coordinates (aspect-ratio: 340 / 300)
    Horizontal gap = 1.1% of width
    Vertical gap = 1.25% of height (equal to 1.1% of width)
  */
  .item-1 {
    --left: 0;
    --width: 32.6;
  }
  .item-2 {
    --left: 33.7;
    --width: 32.6;
  }
  .item-3 {
    --left: 67.4;
    --width: 32.6;
  }
  .item-4 {
    --left: 0;
    --width: 32.6;
  }
  .item-5 {
    --left: 33.7;
    --width: 32.6;
  }
  .item-6 {
    --left: 33.7;
    --width: 32.6;
  }
  .item-7 {
    --left: 67.4;
    --width: 32.6;
  }

  .mobile-grid-content-block {
    display: block;
    color: #2c2d2d;
  }

  .mobile-content-block__heading {
    font-family: var(--font-clash-display);
    font-weight: 500;
    font-size: 24px;
  }

  .mobile-content-block__content {
    font-family: var(--font-archivo);
    font-weight: 400;
    font-size: 14px;
  }

  .heading-grid-background-image-section {
    font-weight: 400;
    font-size: 40px;
    line-height: 120%;
  }
}

.heading-grid-background-image-section{
text-transform: none;
}