@scope (.hero-slider) {
  :scope {
    position: relative;
  }

  .slides {
    position: absolute;
    inset: 0;
  }

  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    border-radius: var(--radius);
    transition: opacity 0.6s ease;
  }

  .slide.is-active {
    opacity: 1;
  }

  .overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgb(16 19 24 / 50%);
    background-image: linear-gradient(90deg, rgb(16 18 20 / 65%) 31%, rgb(16 18 20 / 0%) 60%);
  }

  .padding-global {
    z-index: 1;
  }

  .header-component {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 100svh;
    padding-top: 5rem;
  }

  .content {
    position: relative;
    z-index: 1;
    color: var(--color-white);
    width: 100%;
    padding-inline-end: 30vw;
  }

  .eyebrow {
    color: var(--color-white);
  }

  h1 {
    text-wrap: balance;
    color: var(--color-orange);
    margin-block: 0.1em 0.3em;
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.05;
  }

  .lead {
    margin-bottom: 0;
    color: var(--color-white);
    font-size: 0.9em;
  }

  .actions {
    display: flex;
    gap: 1.5rem;
  }

  .scroll-down {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 0.2em solid var(--color-orange);
    border-radius: var(--radius);
    color: var(--color-orange);
    margin-inline: auto;
    transition:
      color 0.3s,
      transform 0.3s,
      background-color 0.3s;
    position: absolute;
    inset: auto 0 40px auto;

    svg {
      width: 80%;
      height: 80%;
    }

    &:hover,
    &:focus-visible {
      background-color: var(--color-orange);
      color: var(--color-text);
      transform: scale(0.9);
    }
  }

  @media (width <= 991px) {
    .content {
      width: 100%;
      padding-inline-end: 4rem;
    }

    .scroll-down {
      width: 3rem;
      height: 3rem;
    }
  }

  @media (width <= 767px) {
    :scope {
      background-color: var(--color-bg-blue);
      min-height: 80vh;
      padding-bottom: 0;
    }

    .slides {
      position: relative;
      z-index: 4;
      inset: auto;
      height: 25rem;
    }

    .overlay {
      display: none;
    }

    .header-component {
      min-height: auto;
      margin-top: 3rem;
      padding-top: 0;
    }

    .content {
      width: 100%;
      padding-inline-end: 0;
      color: var(--color-text);
    }

    .eyebrow {
      font-size: 0.8em;
      color: var(--color-text);
    }

    h1 {
      color: var(--color-blue);
      font-size: 1.6em;
    }

    .lead {
      font-size: 0.8em;
      color: var(--color-text);
    }

    .scroll-down {
      display: none;
    }
  }

  @media (width <= 479px) {
    :scope {
      background-color: var(--color-bg-blue);
    }

    .slides {
      height: 18rem;
    }

    .content {
      width: 100%;
    }

    h1 {
      margin-top: 0;
      font-size: 1.6em;
    }
  }
}