.hero {
  position: relative;
  width: 100%;
  height: 42rem;
  overflow: hidden;

  .fixed-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-side);
    pointer-events: none;

    /* Riabilitare gli eventi del mouse per gli elementi interni */
    .hero-tag,
    h1,
    .button-outline {
      pointer-events: auto;
    }

    &[data-hero-variant="xl-mid-left"] {
      max-width: 56rem;
      margin-inline: 10% auto;
      display: inline-grid;
      place-content: center;
      padding: 0 5rem;
      gap: var(--spacing-xxxxl);

      h1 {
        text-align: left;
      }
    }

    &[data-hero-variant="l-mid-right"] {
      max-width: 45rem;
      justify-content: end;
      gap: var(--spacing-sm);
      padding-block-end: 6rem;
      margin-inline-start: auto;
      padding-inline: var(--spacing-side);
      margin-block-start: auto;

      @media screen and (max-width: 48rem) {
        padding-block-end: 6rem;
        padding-inline: var(--spacing-side-mobile);
      }

      @media screen and (min-width: 80rem) {
        margin-inline-start: 50%;
      }
    }

    &[data-hero-variant="l-top-left"] {
      max-width: 45rem;
      justify-content: start;
      gap: var(--spacing-sm);
      margin-inline-end: auto;
      padding-block-start: calc(var(--spacing-side) * 2.5);
      padding-inline-start: var(--spacing-side);

      @media screen and (max-width: 48rem) {
        padding-inline-start: var(--spacing-side-mobile);
      }
    }

    &[data-hero-variant="l-mid-center-left"] {
      max-width: 55rem;
      justify-content: start;
      gap: var(--spacing-sm);
      margin-inline-end: auto;
      padding-block-start: calc(var(--spacing-side) * 2.5);
      padding-inline-start: calc(var(--spacing-side) * 2.5);

      @media screen and (max-width: 48rem) {
        padding-inline-start: var(--spacing-side-mobile);
      }
    }

    h1 {
      z-index: 2;
      max-width: 27ch;

      @media screen and (max-width: 48rem) {
        line-height: 105%;
      }
    }

    .hero-tag {
      z-index: 2;
    }

    .button-outline {
      z-index: 2;
      width: fit-content;
    }

    @media screen and (max-width: 48rem) {
      padding: 0 2rem;
      margin: 0 auto;
    }
  }

  .hero-breadcrumbs-container {
    position: absolute;
    top: var(--spacing-side);
    left: var(--spacing-side);
    width: 100%;
    z-index: 10;

    @media screen and (max-width: 48rem) {
      left: var(--spacing-side-mobile);
      top: var(--spacing-side-mobile);
    }
  }

  .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
          308deg,
          #000 -12.28%,
          rgba(255, 255, 255, 0) 69.99%
        ),
        rgba(0, 0, 0, 0.3);
      mix-blend-mode: multiply;
    }
  }

  .hero-image-wrapper,
  .hero-swiper {
    width: 100%;
    height: 100%;

    .hero-swiper-wrapper {
      z-index: 2;
      cursor: grab;

      &:active {
        cursor: grabbing;
      }

      .hero-swiper-slide {
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        img {
          object-fit: cover;
          height: 100%;
          width: 100%;
        }

        &::after {
          content: "";
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(
              308deg,
              #000 -12.28%,
              rgba(255, 255, 255, 0) 69.99%
            ),
            rgba(0, 0, 0, 0.3);
          mix-blend-mode: multiply;
        }
      }
    }

    .hero-content-wrapper {
      position: absolute;
      inset: 0;
      max-width: var(--max-section-grid-width);
      margin: 0 auto;
    }
  }
}

div.hero-swiper-pagination {
  text-align: right;
  margin-block-end: 3rem;

  @media screen and (max-width: 48rem) {
    text-align: center;

    &[data-hero-variant="xl-mid-left"] {
      display: none;
    }
  }
}

span.swiper-pagination-bullet {
  width: 2.625rem;
  /* 42px */
  height: 2px;
  background-color: var(--Grey-Grey-3, #9e9e9e);
  transition: width 0.3s ease;
  border-radius: unset;
  opacity: 1 !important;
}

span.swiper-pagination-bullet-active {
  width: 7rem;
  background-color: var(--white);
}

.swiper-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet:last-child,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet:last-child {
  margin-inline-end: 3.5rem;
}