new-codex.storage/@library/hero.css

.hero {
  --active-background-color: var(--dark-30);
  display: flex;
  height: 720px;
  position: relative;
  min-height: 95vh;
  z-index: 1;
  overflow-x: hidden;
  transition: background-color 0.6s ease, opacity 0.2s ease;
  opacity: 0.5;

  iframe {
    position: absolute;
    top: 0;
    height: 100%;
    border: none;
    right: 0;
    width: 100%;
  }

  img[fetchpriority="high"] {
    position: absolute;
    top: 0;
    right: -20%;
    mix-blend-mode: lighten;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease;
  }

  &.active {
    background-color: var(--active-background-color);
    opacity: 1;

    img[fetchpriority="high"] {
      opacity: 1;
    }
  }

  > div,
  > footer {
    z-index: 1;
  }

  @media (min-width: 1001px) {
    flex-direction: column;

    > div:first-child {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 60%;

      @media (max-width: 1400px) {
        padding-left: 1em;
      }

      @media (min-width: 1001px) {
        position: relative;
        top: 7em;
      }
    }
  }

  @media (max-width: 1000px) {
    flex-direction: column;
    justify-content: flex-end;

    img[fetchpriority="high"] {
      right: -35%;
    }

    > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin-bottom: 1em;
      padding: 1em;
    }
  }

  @media (max-width: 800px) {
    img[fetchpriority="high"] {
      right: -55%;
    }
  }

  @media (max-width: 600px) {
    img[fetchpriority="high"] {
      right: -80%;
    }
  }

  @media (max-width: 430px) {
    img[fetchpriority="high"] {
      right: -140%;
    }
  }

  h1 {
    font-weight: 500;
    color: white;
    margin: 0;

    @media (min-width: 1501px) {
      font-size: 20em;
    }

    @media (min-width: 1401px) and (max-width: 1500px) {
      font-size: 15em;
    }

    @media (min-width: 1401px) {
      text-align: right;
    }

    @media (max-width: 1400px) {
      text-align: left;
    }

    @media (min-width: 1201px) and (max-width: 1400px) {
      font-size: 14em;
    }

    @media (min-width: 501px) and (max-width: 1200px) {
      font-size: 10em;
    }

    @media (max-width: 500px) {
      font-size: 7em;
    }
  }

  .sub {
    display: flex;
    gap: 1em;

    @media (min-width: 1501px) {
      left: 20%;
      top: -6em;
    }

    @media (min-width: 1401px) and (max-width: 1500px) {
      top: -4em;
      right: -10em;
    }

    @media (min-width: 1401px) {
      justify-content: center;
      align-items: center;
      position: relative;
    }

    @media (max-width: 1000px) {
      flex-direction: column;
    }

    .video {
      display: flex;

      > .icon {
        position: relative;
        left: 27px;
      }

      .video-player {
        --thumbnail: url(/img/poster.jpg);
        background-color: var(--dark-0);
        width: 220px;
        height: 90px;
      }

      .video-player + .icon {
        position: relative;
        left: -27px;
      }
    }

    h2 {
      font-family: Azeret Mono;
      font-weight: 300;
      font-size: 1.5em;
      text-transform: uppercase;
      color: var(--green-10);
      margin: 0;
      width: 205px;
      color: var(--green-10);
      display: flex;
      align-items: center;
    }
  }

  footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    width: 100%;
    padding: var(--padding-section);

    @media (min-width: 1401px) {
      margin: auto;
    }

    .discover {
      font-weight: 500;
      font-size: 1.15em;
      color: var(--green-10);
      transition: border-color 0.5s, color 0.5s;
      display: flex;
      align-items: center;
      gap: 0.25em;

      .arrow {
        position: relative;
        top: 1px;
        left: 0.25em;
        transform: rotate(90deg);
      }
    }

    div {
      @media (min-width: 1001px) {
        display: flex;
        align-items: center;
        gap: 1em;
      }

      @media (max-width: 1000px) {
        display: none;
      }

      .arrow {
        @media (min-width: 1001px) {
          background-color: #000000;
          height: 40px;
          width: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          cursor: pointer;
          border: 1px solid transparent;
          transition: color 0.5s, border-color 0.5s;
          color: var(--grey-41);

          &[aria-disabled] {
            background-color: var(--dark-40);
          }

          &:hover:not(&[aria-disabled]) {
            color: white;
            border-color: white;
          }
        }
      }
    }

    span {
      color: white;
    }
  }
}