.hero--0 {
  gap: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  height: calc(100vh - 76px);
  background-color: var(--clr-black);
}

.hero--0 .component__content {
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  place-content: center;
  position: relative;
  z-index: 1;
}

.hero--0 .component__assets {
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  height: calc(100vh - 76px);
}

.hero--0 .component__assets::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  top: calc(var(--header-height) + 1.25rem);
  background: linear-gradient(360deg, rgba(0, 32, 62, 0) 52.17%, rgba(0, 32, 62, 1) 95.08%),
    linear-gradient(0deg, rgba(0, 32, 62, 0.1), rgba(0, 32, 62, 0.1));
}

.is-root .hero--0 .component__assets::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  top: calc(var(--header-height) + 1.25rem);
  background: linear-gradient(359.77deg, rgba(0, 0, 0, 0) 52.17%, rgba(0, 0, 0, 1) 95.08%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.hero--0 .component__assets img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--0 .hero__item {
  display: grid;
  grid-template-columns:
    minmax(var(--grid-padding), 1fr) repeat(
      var(--grid-columns),
      minmax(0, calc(var(--max-content-width) / var(--grid-columns)))
    )
    minmax(var(--grid-padding), 1fr);
}

.hero--0 .hero__content {
  grid-column: 1 / -1;
  padding: calc(2rem * 2) 2rem 2rem;
  background-color: var(--clr-secondary-40);
  backdrop-filter: blur(0.625rem);
}

.hero--0 .hero__content > * + * {
  margin-block-start: 1rem;
}

.hero--0 .hero__eyebrow {
  font-family: var(--ff-heading);
  font-size: clamp(1.5rem, 0.791vw + 1.215rem, 2rem);
  line-height: clamp(1.5rem, 0.791vw + 1.215rem, 2rem);
  text-transform: uppercase;
  color: var(--clr-primary);
}

.hero--0 .hero__title {
  font-family: var(--ff-heading);
  font-size: clamp(2.5rem, 2.374vw + 1.645rem, 4rem);
  line-height: clamp(2.5rem, 2.374vw + 1.645rem, 4rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--clr-white);
  hyphens: auto;
}

.hero--0 .hero__link {
  margin-block-start: 2rem;
}

.hero--0 .swiper-button-prev,
.hero--0 .swiper-button-next {
  --swiper-theme-color: var(--clr-white);
  --swiper-navigation-size: 4.125rem;

  top: auto;
  bottom: 0;

  display: none;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  margin-top: unset;
  background-color: var(--clr-secondary);
  transition: color 600ms ease, background-color 600ms ease;
}

.hero--0 .swiper-button-prev:hover,
.hero--0 .swiper-button-next:hover {
  --swiper-theme-color: var(--clr-secondary);
  background-color: var(--clr-white);
}

.hero--0 .swiper-button-next:after,
.hero--0 .swiper-button-prev:after {
  font-size: 1.75rem;
}

.hero--0 .swiper-button-prev {
  left: 50%;
  right: auto;
}

.hero--0 .swiper-button-next {
  left: calc(50% + 4.125rem + 1px);
  right: auto;
}

.hero--0 .swiper-pagination {
  top: 2.75rem;
  bottom: auto;
  text-align: left;
  left: 2rem;
  right: 2rem;
  display: flex;
  gap: 0.625rem;
  width: auto;
}

.hero--0 .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.hero--0 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: unset;
  height: auto;
}

.hero--0 .swiper-pagination-bullet {
  --swiper-pagination-bullet-width: 100%;
  --swiper-pagination-bullet-height: 0.25rem;
  --swiper-pagination-bullet-border-radius: 0;
  --swiper-pagination-color: transparent;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-inactive-color: transparent;

  font-weight: var(--fw-bold);
  color: var(--clr-tertiary);
  text-transform: uppercase;

  flex: 0 1 calc(100% / var(--p-length, 1));

  transition: flex 600ms ease;
}

.hero--0 .swiper-pagination-bullet-active {
  flex: 1 1 100%;
  color: var(--clr-secondary);
}

.hero--0 .swiper-pagination-bullet::after {
  --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.22);

  content: '';
  display: block;
  width: var(--swiper-pagination-bullet-width);
  height: var(--swiper-pagination-bullet-height);
  background: var(--swiper-pagination-bullet-inactive-color);
}

.hero--0 .swiper-pagination-bullet-active::after {
  --swiper-pagination-bullet-inactive-color: var(--clr-white);

  background: var(--swiper-pagination-bullet-inactive-color);
}

@media (min-width: 576px) {
  .hero--0 .hero__content {
    padding: calc(2.75rem * 2) 2.75rem 2.75rem;
  }
  .hero--0 .hero__content > * + * {
    margin-block-start: 1.5rem;
  }
  .hero--0 .hero__link {
    margin-block-start: 3.125rem;
  }
  .hero--0 .swiper-pagination {
    left: 2rem;
    right: 2rem;
  }
}

@media (min-width: 1024px) {
  .hero--0 .hero__content {
    grid-column: 8 / -1;
  }
  .hero--0 .swiper-button-prev,
  .hero--0 .swiper-button-next {
    display: flex;
  }
  .hero--0 .swiper-pagination {
    width: 30%;
    left: calc(50% + 2.75rem);
  }
}