/* Split editorial hero with three benefit cards and a product strip. */
:where(.ig-section-hero-v124),
main > section.ig-section-hero-v124:first-child {
  background: var(--section-hero-background);
  text-align: start;
  padding-block-start: var(--section-padding-block-start);
}

:where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-media {
  overflow: hidden;
  clip-path: polygon(24% 0, 100% 0, 100% 78%, 90% 100%, 0 100%);
  clip-path: shape(from 24% 0%, line to 100% 0%, line to 100% 78%, line to 96% 93%, curve to 90% 100% with 94% 100%, line to 0% 100%, line to 18% 7%, curve to 24% 0% with 20% 0%, close);
  border-radius: var(--section-media-radius) 0 var(--section-media-radius) var(--section-media-radius);
  position: relative;
  border: 0;
  box-shadow: none;
}

:where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, var(--section-hero-background) 0%, var(--section-hero-background) 18%, transparent 38%),
    radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--section-hero-background) 55%, transparent) 0%, transparent 58%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, #000 78%, #000 100%);
}

:where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-action > i {
  flex: 0 0 1.5rem;
}

:where(.ig-section-hero-v124) .ig-section-card:has(.ig-section-card-description) .ig-section-card-title {
  align-self: start;
}

:where(.ig-section-hero-v124) .ig-section-hero-media {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

:where(.ig-section-hero-v124) .ig-section-hero-title {
  margin: 0;
  align-self: center;
  color: var(--section-hero-title-color);
  font-family: var(--font-heading);
  font-size: var(--section-hero-title-font-size);
  font-weight: var(--section-hero-title-font-weight);
  line-height: var(--section-hero-title-line-height);
  text-wrap: initial;
}

:where(.ig-section-hero-v124) .ig-section-hero-title > * {
  display: block;
}

:where(.ig-section-hero-v124) .ig-section-hero-title em {
  color: var(--section-hero-accent-color);
  font-style: normal;
}

:where(.ig-section-hero-v124) .ig-section-hero-description {
  margin: 0;
  align-self: center;
  color: var(--section-hero-description-color);
  font-size: var(--section-hero-description-font-size);
  line-height: 1.5;
}

section.ig-section.ig-section-hero-v124 > .ig-grid-container > a.ig-section-action.ig-button-primary {
  justify-self: start;
  align-self: center;
  gap: 1rem;
  min-inline-size: 0;
  white-space: normal;
  block-size: auto;
  inline-size: max-content;
  max-inline-size: 100%;
}

:where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-action > span {
  inline-size: auto;
  flex: 0 1 auto;
}

:where(.ig-section-hero-v124) .ig-section-action svg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

:where(.ig-section-hero-v124) .ig-section-eyebrow {
  align-self: var(--section-eyebrow-block-alignment, center);
  margin: 0;
  color: var(--section-hero-eyebrow-color);
  font-size: var(--section-eyebrow-font-size, .7rem);
  letter-spacing: var(--section-eyebrow-letter-spacing, .3em);
  font-weight: var(--section-eyebrow-font-weight, 500);
}

:where(.ig-section-hero-v124) .ig-section-card-caption {
  align-self: center;
  font-family: var(--section-caption-font-family);
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  line-height: 1.2;
  color: var(--section-hero-description-color);
  transform: rotate(-12deg);
}

:where(.ig-section-hero-v124) .ig-section-card {
  text-align: start;
  padding: 0;
  border: 0;
}

:where(.ig-section-hero-v124) .ig-section-card-title {
  align-self: center;
  margin: 0;
  font-size: var(--section-card-title-size);
  line-height: 1.35;
  font-weight: 600;
  overflow-wrap: anywhere;
}

:where(.ig-section-hero-v124) .ig-section-card-description {
  margin: 0;
  font-size: var(--section-card-description-size);
  line-height: 1.45;
}

:where(.ig-section-hero-v124) .ig-section-card-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--section-hero-icon-color);
}

:where(.ig-section-hero-v124) .ig-section-card-heading-icon svg {
  inline-size: 2.25rem;
  block-size: 2.25rem;
}

:where(.ig-section-hero-v124) .ig-section-card:not(:has(.ig-section-card-description)) .ig-section-action {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  aspect-ratio: 1;
  border: 3px solid var(--section-hero-ring-color);
  border-radius: var(--button-radius);
  color: var(--section-hero-icon-color);
}

:where(.ig-section-hero-v124) .ig-section-card:has(.ig-section-card-description) {
  background: transparent;
  box-shadow: none;
}

:where(.ig-section-hero-v124) .ig-section-card:has(.ig-section-card-description) .ig-section-card-heading-icon {
  background: var(--section-hero-icon-background);
  aspect-ratio: 1;
  block-size: auto;
  align-self: start;
  border-radius: var(--section-card-radius);
}

:where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-card-label {
  line-height: 1.9;
  font-size: .7rem;
  letter-spacing: .15em;
  color: var(--section-hero-eyebrow-color);
  align-self: center;
  overflow-wrap: normal;
  word-break: normal;
}

/* viewport: belowDesktop */
@media (width < 1025px) {
  :where(.ig-section-hero-v124) > :where(.ig-grid-container) {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  :where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-media {
    order: 5;
    inline-size: 100%;
    block-size: 23rem;
    clip-path: none;
  }
  :where(.ig-section-hero-v124) .ig-section-eyebrow {
    align-self: start;
    order: 0;
  }
  :where(.ig-section-hero-v124) .ig-section-hero-title {
    order: 1;
    align-self: stretch;
  }
  :where(.ig-section-hero-v124) .ig-section-hero-description {
    order: 2;
    align-self: stretch;
  }
  :where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-action {
    order: 3;
    align-self: start;
  }
  :where(.ig-section-hero-v124) .ig-section-card-caption {
    order: 4;
    align-self: start;
    transform: none;
    margin: 0;
  }
  :where(.ig-section-hero-v124) .ig-section-card {
    order: 6;
    display: grid;
    inline-size: 100%;
    min-block-size: 7rem;
  }
  :where(.ig-section-hero-v124) .ig-section-card:has(.ig-section-card-description) {
    min-block-size: 8rem;
  }
  :where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-card-label {
    order: 7;
  }
}

/* viewport: desktop */
@media (min-width: 1025px) {
  :where(.ig-section-hero-v124) > :where(.ig-grid-container) {
    block-size: calc(100svh - var(--section-padding-block-start) - var(--section-padding-block-end));
  }
  :where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-media {
    inline-size: calc(100% + var(--section-padding-inline));
    max-inline-size: none;
  }
  :where(.ig-section-hero-v124) .ig-section-card:not(:has(.ig-section-card-description)) {
    inline-size: calc(100% + var(--section-padding-inline) - 1.5rem);
    block-size: 75%;
    align-self: center;
    translate: 1rem 0;
  }
  :where(.ig-section-hero-v124) .ig-section-card:has(.ig-section-card-description) {
    min-block-size: 0;
  }
  :where(.ig-section-hero-v124) > :where(.ig-grid-container) > .ig-section-card-label {
    font-size: clamp(.45rem, .6vw, .7rem);
    letter-spacing: .15em;
    inline-size: calc(100% + 1rem);
  }
}

/* viewport: desktop */
@media (min-width: 1025px) {
  :where(.ig-section-hero-v124) .ig-section-card:not(:has(.ig-section-card-description)):nth-of-type(2) {
    translate: calc(1rem - 10%) 0;
  }
  :where(.ig-section-hero-v124) .ig-section-card:not(:has(.ig-section-card-description)):nth-of-type(3) {
    translate: calc(1rem - 20%) 0;
  }
}