/** At this monitor size it is wider than Figma */
@media(max-width: 39.999rem) {
.hero {
    --hero-section-height: calc(100vw * 1.3);
}
  }
@media(min-width: 40.001rem) {
.hero {
    --hero-section-height: calc(100vw * 1.15);
}
  }
@media(min-width: 50.001rem) {
.hero {
    --hero-section-height: calc(100vw * 1.0);
}
  }
@media(min-width: 64.001rem) {
.hero {
    --hero-section-height: calc(100vw * 0.5625);
}
  }
@media(min-width: 80.001rem) {
.hero {
    --hero-section-height: calc(100vw * 0.5625);
}
  }
.hero {

  /* 16:9 aspect ratio */
  height: calc(var(--hero-section-height) * 2);
}
.hero .hero--image {
    width: 19rem;
  }
/* Magazine */
.hero .panel {
    height: var(--hero-section-height);
    padding-block: 100px;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
  }
.hero .panel h1 {
      letter-spacing: 7.5px;
    }
.hero .panel:nth-child(1) {
      position: sticky;
      top: 0;
    }
.hero .panel:nth-child(1):after {
        content: "";
        inset: 0;
        position: absolute;
        background: hsla(0, 0%, 0%, 0.55);
        z-index: -1;
      }
.hero .panel:nth-child(1) h1 {
        --heading-color: var(--white);
        text-transform: uppercase;
        font-weight: normal;
        /* Todo this is jank by si */
      }
@media(max-width: 39.999rem) {
.hero .panel:nth-child(1) h1 {
          font-size: 2rem;
      }
        }
@media(min-width: 40.001rem) {
.hero .panel:nth-child(1) h1 {
          font-size: 3rem;
      }
        }
@media(min-width: 50.001rem) {
.hero .panel:nth-child(1) h1 {
          font-size: 5rem;
      }
        }
@media(min-width: 64.001rem) {
.hero .panel:nth-child(1) h1 {
          font-size: 6rem;
      }
        }
@media(min-width: 80.001rem) {
.hero .panel:nth-child(1) h1 {
          font-size: 9rem;
      }
        }
.hero .panel:nth-child(1) img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        z-index: -2;
      }
.hero .panel:nth-child(2) {
      background: white;
      position: relative;
      overflow: hidden;
    }
.hero .panel:nth-child(2) h1 {
        position: absolute;
        --heading-color: var(--onion);
        text-transform: uppercase;
        font-weight: normal;
        /* Todo this is jank by si */
      }
@media(max-width: 39.999rem) {
.hero .panel:nth-child(2) h1 {
          font-size: 2rem;
      }
        }
@media(min-width: 40.001rem) {
.hero .panel:nth-child(2) h1 {
          font-size: 3rem;
      }
        }
@media(min-width: 50.001rem) {
.hero .panel:nth-child(2) h1 {
          font-size: 5rem;
      }
        }
@media(min-width: 64.001rem) {
.hero .panel:nth-child(2) h1 {
          font-size: 6rem;
      }
        }
@media(min-width: 80.001rem) {
.hero .panel:nth-child(2) h1 {
          font-size: 9rem;
      }
        }
.hero .panel:nth-child(2) img {
        z-index: 1;
      }
.hero .hero--content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
  }
.hero .hero--subtitle {
    --heading-color: var(--white);
    --heading-family: var(--font-sans);
    text-align: center;
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 1em;
    font-weight: 400 !important;
    margin-top: 0 !important;
    margin-top: initial !important;
  }
.hero .hero--subtitle:before {
      content: "";
      border-bottom: 1px solid var(--white);
      width: 100%;
      display: block;
    }
.hero .hero--subtitle:after {
      content: "";
      border-bottom: 1px solid var(--white);
      width: 100%;
      display: block;
    }
.hero--article {
  padding-block-start: 2rem;
}
.hero--article h1 {
    font-weight: 500;
    /** Si: between h1 and h2 */
    font-size: 4rem;
  }
.hero--article .hero--layout {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--black);
    grid-gap: 2.5rem;
    gap: 2.5rem;
    padding-block-end: 1.75rem;
    align-items: start;
  }
@media (min-width: 50.001rem) {
.hero--article .hero--layout {
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
  }
    }
.hero--article .hero--content {
    display: grid;
    grid-gap: 1rem;
    gap: 1rem;
    padding-right: 20%;
  }
.hero--article .hero--content p {
      font-size: var(--paragraph-size-header);
    }
.hero--article .image--wrapper {
    width: 100%;
    aspect-ratio: 7/5;
  }
.hero--article .image--wrapper .hero--image {
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
      height: 100%;
    }
.hero--article footer {
    display: flex;
    padding: 1rem 0;
    flex-direction: column;
    gap: 1.25rem;
  }
@media (min-width: 50.001rem) {
.hero--article footer {
      align-items: center;
      justify-content: space-between;
      flex-direction: row;
  }
    }
.hero--article footer p {
      --paragraph-size: 14px;
      margin: 0;
    }
.hero--article footer .hero--footer-labels {
      text-transform: uppercase;
    }
.hero--article[data-variant="media"] {
  text-align: center;
}
.hero--article[data-variant="media"] .hero--layout {
    grid-template-columns: 1fr;
  }
.hero--article[data-variant="media"] .hero--content {
    margin-bottom: 30px;
    padding-right: 0;
  }
@media (min-width: 50.001rem) {
.hero--article[data-variant="media"] .hero--content {
      margin-bottom: 50px;
  }
    }
.hero--article[data-variant="media"] .hero--content p {
      max-width: 630px;
      margin-inline: auto;
    }
.hero--article[data-variant="media"] .media--wrapper {
    width: 100%;
    aspect-ratio: 16/9;
  }
.hero--article[data-variant="media"] .media--wrapper iframe {
      width: 100%;
      height: 100%;
    }
.hero--article[data-variant="media"] .media--wrapper img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
    }