/* Overlapping Squares Hero — responsive artwork scaling.
   Elementor's per-breakpoint absolute-offset controls can't express the
   ratio-preserving scaling this design needs, so it's done here.
   Squares are sized as percentages of the artwork wrapper (75.5% / 58.7%,
   matching the 450/596 and 350/596 desktop ratios) so they always fit
   inside it regardless of how wide the wrapper has been scaled. */

@media (max-width: 1380px) and (min-width: 901px) {
  .prop-overlap-hero-row.prop-overlap-hero-row.prop-overlap-hero-row.prop-overlap-hero-row > .e-con-inner {
    column-gap: min(85px, 6vw) !important;
  }
  .prop-overlap-content.prop-overlap-content.prop-overlap-content.prop-overlap-content {
    width: min(610px, 46vw) !important;
  }
  .prop-overlap-artwork.prop-overlap-artwork.prop-overlap-artwork.prop-overlap-artwork {
    width: min(596px, 44vw) !important;
    min-height: 0 !important;
    aspect-ratio: 596 / 670;
  }
  .prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark,
  .prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light {
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark {
    width: 75.5% !important;
    aspect-ratio: 1 / 1;
  }
  .prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light {
    width: 58.7% !important;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 900px) {
  .prop-overlap-hero-row.prop-overlap-hero-row.prop-overlap-hero-row.prop-overlap-hero-row > .e-con-inner {
    flex-direction: column !important;
    align-items: center !important;
  }
  .prop-overlap-content.prop-overlap-content.prop-overlap-content.prop-overlap-content {
    width: 100% !important;
    max-width: 610px !important;
    text-align: left;
  }
  .prop-overlap-artwork.prop-overlap-artwork.prop-overlap-artwork.prop-overlap-artwork {
    width: 100% !important;
    max-width: 450px !important;
    min-height: 0 !important;
    aspect-ratio: 596 / 670;
    margin-top: 40px;
  }
  .prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark,
  .prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light {
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark.prop-overlap-square--dark {
    width: 75.5% !important;
    aspect-ratio: 1 / 1;
  }
  .prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light.prop-overlap-square--light {
    width: 58.7% !important;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 480px) {
  .prop-overlap-artwork.prop-overlap-artwork.prop-overlap-artwork.prop-overlap-artwork {
    max-width: min(450px, 76vw) !important;
  }
}