.mahina-about-hero {
  position: relative;
  display: grid;
  place-items: center;
}

.mahina-about-hero__marquees {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 40px;
  left: 50%;
  width: 130%;
  inset: 0 auto 0 50%;
  transform: translateX(-50%) rotate(-6deg);
  transform-origin: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.mahina-about-hero__line {
  overflow: hidden;
  padding-inline: 0;
}

.mahina-about-hero__track {
  width: max-content;
  display: flex;
  align-items: center;
  transform-origin: center;
}

.mahina-about-hero__line.is-forward .mahina-about-hero__track {
  animation: none;
}

.mahina-about-hero__line.is-reverse .mahina-about-hero__track {
  animation: none;
}

.mahina-about-hero__sequence {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.mahina-about-hero__word {
  flex-shrink: 0;
  font-family: "Syne Static", sans-serif;
  color: var(--mahina-color-white);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.mahina-about-hero.is-ready .mahina-about-hero__marquees {
  animation: mahina-about-hero-marquees-intro 1s linear forwards;
  animation-delay: 0.8s;
}

.mahina-about-hero.is-ready .mahina-about-hero__line.is-forward .mahina-about-hero__track {
  animation: mahina-about-hero-marquee-forward 40s linear infinite;
}

.mahina-about-hero.is-ready .mahina-about-hero__line.is-reverse .mahina-about-hero__track {
  animation: mahina-about-hero-marquee-reverse 40s linear infinite;
}


.mahina-about-hero__word.is-light-green {
  color: var(--mahina-color-light-green);
}

.mahina-about-hero__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin: 0 24px;
  background: var(--mahina-color-light-green);
  flex-shrink: 0;
}

.mahina-about-hero__media {
  position: relative;
  z-index: 1;
  width: 420px;
  height: 420px;
  min-width: 420px;
  min-height: 420px;
  animation: mahina-about-hero-media-intro 1s ease-out both;
  transform-origin: center;
}

.mahina-about-hero__svg,
.mahina-about-hero__editor-image {
  width: 100%;
  height: auto;
  display: block;
  transform: translate3d(0, 0, 0);
}

.mahina-about-hero__svg path {
  fill: rgba(255, 255, 255, 0.18);
}

.mahina-about-hero__svg-image {
  image-rendering: -webkit-optimize-contrast;
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  filter: grayscale(1);
}

.mahina-about-hero-block__image-toolbar {
  max-width: 12rem;
  margin-bottom: 1rem;
}

.mahina-about-hero.is-editor-preview .mahina-about-hero__media {
  aspect-ratio: 1;
  overflow: hidden;
  filter: grayscale(1);
  clip-path: path("M5.85122 11.8509L5.81107 11.8511L5.85122 11.8513C3.04992 11.8513 0.696989 13.771 0.0362137 16.3666C-0.168163 17.1694 0.522651 17.8514 1.35108 17.8514H4.3511C5.17952 17.8514 5.8511 18.523 5.8511 19.3514L5.8511 22.3511C5.8511 23.1795 6.53309 23.8703 7.33592 23.6659C9.92959 23.0056 11.8483 20.6557 11.8511 17.8571C11.8539 20.6557 13.7726 23.0056 16.3663 23.6659C17.1691 23.8703 17.8511 23.1795 17.8511 22.3511V19.3514C17.8511 18.523 18.5227 17.8514 19.3511 17.8514L22.3511 17.8514C23.1795 17.8514 23.8703 17.1694 23.6659 16.3666C23.0052 13.771 20.6522 11.8513 17.8509 11.8513L17.8911 11.8511L17.8509 11.8509C20.6522 11.8509 23.0052 9.93118 23.6659 7.33556C23.8703 6.53274 23.1795 5.85074 22.3511 5.85074H19.3511C18.5227 5.85074 17.8511 5.17916 17.8511 4.35074L17.8511 1.35107C17.8511 0.522647 17.1691 -0.168167 16.3663 0.0362142C13.7724 0.696557 11.8536 3.04682 11.8511 5.84565C11.8486 3.04682 9.92978 0.696558 7.33592 0.0362146C6.5331 -0.168166 5.8511 0.522647 5.8511 1.35107V4.35074C5.8511 5.17916 5.17952 5.85074 4.35109 5.85074L1.35107 5.85074C0.522647 5.85074 -0.168166 6.53274 0.036211 7.33556C0.696986 9.93118 3.04992 11.8509 5.85122 11.8509Z");
}

.mahina-about-hero__editor-image {
  height: 100%;
  object-fit: cover;
}

.mahina-about-hero__editor-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.12);
  color: var(--mahina-color-white);
}

@media (max-width: 782px) {
  .mahina-about-hero__marquees {
    gap: 16px;
  }

  .mahina-about-hero__word {
    font-size: 32px;
  }

  .mahina-about-hero__media {
    width: 280px;
    height: 280px;
    min-width: 280px;
    min-height: 280px;
  }
}

@keyframes mahina-about-hero-marquee-forward {
  from {
    transform: translateX(-33.3333%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes mahina-about-hero-marquee-reverse {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3333%);
  }
}

@keyframes mahina-about-hero-media-intro {
  from {
    transform: scale(0) rotate(280deg);
  }

  to {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes mahina-about-hero-marquees-intro {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mahina-about-hero__marquees,
  .mahina-about-hero__media,
  .mahina-about-hero__line.is-forward .mahina-about-hero__track,
  .mahina-about-hero__line.is-reverse .mahina-about-hero__track {
    animation: none;
  }

  .mahina-about-hero__marquees {
    opacity: 1;
  }
}