/* Header */
.main-header__wrapper {
  position: relative;
  background-color: var(--color-black);
  transition: transform 0.3s ease;

  &.is-sticky {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  &.nav-hidden {
    transform: translateY(-100%);
  }
}
main-header {
  padding: calc(var(--small) * var(--px-to-rem));

  @media (min-width: 768px) {
    padding: calc(var(--small) * var(--px-to-rem))
      calc(var(--medium) * var(--px-to-rem));
  }
}
.main-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--page-width);
  margin: 0 auto;
}
main-header a {
  position: relative;
  text-decoration: none;
  color: var(--color-white);
}
main-header a sup {
  position: absolute;
  left: 100%;
  overflow: hidden;
  max-width: var(--page-margin);
}
main-header .header__logo {
  height: 100%;
  max-height: calc(var(--large) * var(--px-to-rem));
  width: auto;
}
main-header svg {
  width: calc(var(--medium) * var(--px-to-rem));
}
main-header .header__menu,
main-header .header__icons {
  display: flex;
  gap: calc(var(--small) * var(--px-to-rem));
}
/* End Header */

/* Hero */
.hero {
  position: relative;
  aspect-ratio: 9 / 12;
  width: 100%;
  padding: 0 calc(var(--small) * var(--px-to-rem));
  max-height: 75vh;
  overflow: hidden;

  @media (min-width: 768px) {
    aspect-ratio: 16 / 9;
  }
}
.hero__inner {
  height: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
}
.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  opacity: var(--hero-overlay-opacity);
  z-index: 1;
}
.hero__content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  z-index: 2;
}
.hero__title-container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--small) * var(--px-to-rem));
  max-width: 80%;
  padding-left: calc(var(--regular) * var(--px-to-rem));

  @media (min-width: 768px) {
    max-width: 70%;
    padding-left: calc(var(--xxlarge) * var(--px-to-rem));
  }

  & img {
    width: 100%;
    height: auto;
  }
}
.hero__title {
  font-family: "Shalyne", sans-serif;
  font-size: calc(var(--medium) * var(--px-to-rem));
  font-weight: normal;
  color: var(--color-black);
  text-align: center;

  @media (min-width: 768px) {
    font-size: calc(var(--xlarge) * var(--px-to-rem));
    max-width: calc(500 * var(--px-to-rem));
  }
}
/* End Hero */

/* Footer */
footer {
  color: var(--color-black);
  background-color: var(--color-pink);
  padding: calc(var(--xxsmall) * var(--px-to-rem));

  & svg {
    fill: var(--color-black);
    width: 46px;
    height: 46px;
  }

  @media (min-width: 768px) {
    padding: calc(var(--small) * var(--px-to-rem));
  }
}
footer a {
  text-decoration: none;
  color: var(--color-black);
}
footer .footer__links,
footer .footer__payment {
  display: flex;
  gap: calc(var(--small) * var(--px-to-rem));
}
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--xxsmall) * var(--px-to-rem));
  margin: 0 auto;
  max-width: var(--page-width);

  @media (min-width: 768px) {
    flex-direction: row;
    justify-content: space-between;
  }
}
.footer__social {
  display: flex;
  gap: calc(var(--small) * var(--px-to-rem));
}
/* End Footer */

.video {
  background-color: var(--color-dark-pink);
  padding: calc(var(--medium) * var(--px-to-rem));
  width: 100%;

  @media (min-width: 768px) {
    padding: calc(var(--xlarge) * var(--px-to-rem))
      calc(var(--small) * var(--px-to-rem));
  }

  & iframe {
    aspect-ratio: 16 / 9;
  }
}

.video__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--regular) * var(--px-to-rem));
  margin: 0 auto;

  @media (min-width: 768px) {
    flex-direction: row;
  }
}

.video__container {
  width: 100%;
  height: 100%;
  max-width: calc(1200 * var(--px-to-rem));

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