:root {
  --corner-radius-normal: 0.25rem;
  --corner-radius-huge: 6rem;
}

@media (min-width: 768px) {
  :root {
    --corner-radius-normal: 1rem;
    --corner-radius-huge: 12.25rem;
  }
}

.image-overlay {
  margin-block: var(--spacing-offset, 6rem);
  max-width: var(--content-wrapper-max-width, 100vw);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .image-overlay {
    --spacing-inline: 1rem;
    padding-inline: 1rem;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .image-overlay { --spacing-inline: 2rem; }
}
@media (min-width: 768px) and (min-width: 992px) {
  .image-overlay { --spacing-inline: 3rem; }
}
@media (min-width: 768px) and (min-width: 768px) {
  .image-overlay { padding-inline: 2rem; }
}
@media (min-width: 768px) and (min-width: 992px) {
  .image-overlay { padding-inline: 3rem; }
}

/* Base overlay */
.image-overlay > .overlay {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.4;

  background-image: var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

@media (min-width: 768px) {
  .image-overlay > .overlay { aspect-ratio: 44 / 21; }
}

/* Corner variants: border-radius clip */
.image-overlay > .overlay.top_right {
  border-radius: var(--corner-radius-normal) var(--corner-radius-huge) var(--corner-radius-normal) var(--corner-radius-normal);
}
.image-overlay > .overlay.top_left {
  border-radius: var(--corner-radius-huge) var(--corner-radius-normal) var(--corner-radius-normal) var(--corner-radius-normal);
}
.image-overlay > .overlay.bottom_right {
  border-radius: var(--corner-radius-normal) var(--corner-radius-normal) var(--corner-radius-huge) var(--corner-radius-normal);
}
.image-overlay > .overlay.bottom_left {
  border-radius: var(--corner-radius-normal) var(--corner-radius-normal) var(--corner-radius-normal) var(--corner-radius-huge);
}

/* -------------------------
   Fallback GRID (only if masks aren't supported)
------------------------- */

.image-overlay > .overlay .grid {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0.5rem;
  overflow: hidden;
}

.image-overlay > .overlay .grid .square::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
  background: black;
}

/* four_square + four_squares fallback layout */
.image-overlay > .overlay.four_square .grid,
.image-overlay > .overlay.four_squares .grid {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
}
.image-overlay > .overlay.four_square .square:nth-child(1),
.image-overlay > .overlay.four_squares .square:nth-child(1) { grid-column: 1/3; }

.image-overlay > .overlay.four_square .square:nth-child(2),
.image-overlay > .overlay.four_squares .square:nth-child(2) { grid-column: 3/5; }

.image-overlay > .overlay.four_square .square:nth-child(2)::before,
.image-overlay > .overlay.four_squares .square:nth-child(2)::before { border-top-right-radius: 4rem; }

.image-overlay > .overlay.four_square .square:nth-child(3),
.image-overlay > .overlay.four_squares .square:nth-child(3) { grid-column: 1/3; }

.image-overlay > .overlay.four_square .square:nth-child(3)::before,
.image-overlay > .overlay.four_squares .square:nth-child(3)::before { border-bottom-left-radius: 4rem; }

.image-overlay > .overlay.four_square .square:nth-child(4),
.image-overlay > .overlay.four_squares .square:nth-child(4) { grid-column: 3/5; }

@media (min-width: 768px) {
  .image-overlay > .overlay.four_square .square:nth-child(1),
  .image-overlay > .overlay.four_squares .square:nth-child(1) { grid-column: 1/2; }

  .image-overlay > .overlay.four_square .square:nth-child(2),
  .image-overlay > .overlay.four_squares .square:nth-child(2) { grid-column: 2/5; }

  .image-overlay > .overlay.four_square .square:nth-child(2)::before,
  .image-overlay > .overlay.four_squares .square:nth-child(2)::before { border-top-right-radius: 8rem; }

  .image-overlay > .overlay.four_square .square:nth-child(3)::before,
  .image-overlay > .overlay.four_squares .square:nth-child(3)::before { border-bottom-left-radius: 8rem; }
}

/* three_square + three_squares fallback layout */
.image-overlay > .overlay.three_square .grid,
.image-overlay > .overlay.three_squares .grid {
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.image-overlay > .overlay.three_square .square:nth-child(1),
.image-overlay > .overlay.three_squares .square:nth-child(1) { grid-column: 1/2; grid-row: 1/2; }

.image-overlay > .overlay.three_square .square:nth-child(1)::before,
.image-overlay > .overlay.three_squares .square:nth-child(1)::before { border-bottom-right-radius: 4rem; }

.image-overlay > .overlay.three_square .square:nth-child(2),
.image-overlay > .overlay.three_squares .square:nth-child(2) { grid-column: 2/2; grid-row: 1/3; }

.image-overlay > .overlay.three_square .square:nth-child(2)::before,
.image-overlay > .overlay.three_squares .square:nth-child(2)::before { border-top-left-radius: 4rem; }

.image-overlay > .overlay.three_square .square:nth-child(3),
.image-overlay > .overlay.three_squares .square:nth-child(3) { grid-column: 1/2; grid-row: 2/3; }

.image-overlay > .overlay.three_square .square:nth-child(3)::before,
.image-overlay > .overlay.three_squares .square:nth-child(3)::before { border-top-left-radius: 4rem; }

.image-overlay > .overlay.three_square .square:nth-child(4),
.image-overlay > .overlay.three_squares .square:nth-child(4) { display: none; }

/* two_square + two_squares fallback layout */
.image-overlay > .overlay.two_square .grid,
.image-overlay > .overlay.two_squares .grid { grid-template-columns: repeat(2, 1fr); }

.image-overlay > .overlay.two_square .square:nth-child(1),
.image-overlay > .overlay.two_squares .square:nth-child(1) { grid-column: 1/2; }

.image-overlay > .overlay.two_square .square:nth-child(1)::before,
.image-overlay > .overlay.two_squares .square:nth-child(1)::before { border-top-left-radius: 4rem; }

.image-overlay > .overlay.two_square .square:nth-child(2),
.image-overlay > .overlay.two_squares .square:nth-child(2) { grid-column: 2/2; }

.image-overlay > .overlay.two_square .square:nth-child(2)::before,
.image-overlay > .overlay.two_squares .square:nth-child(2)::before { border-bottom-right-radius: 4rem; }

.image-overlay > .overlay.two_square .square:nth-child(3),
.image-overlay > .overlay.two_square .square:nth-child(4),
.image-overlay > .overlay.two_squares .square:nth-child(3),
.image-overlay > .overlay.two_squares .square:nth-child(4) { display: none; }

/* -------------------------
   Modern path: CSS masks
------------------------- */

@supports (-webkit-mask: url("")) or (mask: url("")) {

  .image-overlay > .overlay.two_square,
  .image-overlay > .overlay.two_squares,
  .image-overlay > .overlay.three_square,
  .image-overlay > .overlay.three_squares,
  .image-overlay > .overlay.four_square,
  .image-overlay > .overlay.four_squares {
    -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat;
    mask: var(--mask) 0 0 / 100% 100% no-repeat;
    
        -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-position: center;
    mask-position: center;
    
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
  }

  @media (min-width: 768px) {
    .image-overlay > .overlay.four_square,
    .image-overlay > .overlay.four_squares {
      --mask: var(--mask-desktop, var(--mask-mobile));
    }
  }

  /* Hide fallback grid when masking is active */
  .image-overlay > .overlay.two_square .grid,
  .image-overlay > .overlay.two_squares .grid,
  .image-overlay > .overlay.three_square .grid,
  .image-overlay > .overlay.three_squares .grid,
  .image-overlay > .overlay.four_square .grid,
  .image-overlay > .overlay.four_squares .grid {
    display: none;
  }
}
.image-overlay > .overlay:not(.two_square):not(.two_squares):not(.three_square):not(.three_squares):not(.four_square):not(.four_squares) .grid {
  display: none;
}