.homepage {
  aspect-ratio: 16 / 9;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 300;
  height: var(--viewport-height, 100dvh);
  max-width: 100%;
  min-height: 620px;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  width: var(--viewport-width, 100dvh);

  iframe, video {
    aspect-ratio: 16 / 9;
    height: 102%;
    left: 50%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 102%;
    z-index: 0;
  }
}

.homepage--kiosk {
  .homepage__overlaid-content {
    justify-content: center;
  }

  .homepage__modal-content {
    video, iframe {
      height: 100%;
      width: 100%;
    }
  }

  .homepage__modal-close {
    font-weight: bold;
    right: 2%;
    transform: scale(1.5);
    top: 5%;
  }

  .sponsor {
    pointer-events: none;

    a {
      pointer-events: inherit;
    }
  }
}

.homepage__overlaid-content {
  background: rgba(0,0,0,0.5);
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5vh;
  inset: 0;
  padding: 0 0 4vh;
  position: absolute;
  text-align: center;
  z-index: 1;
}

.homepage__title {
  font-size: clamp(36px, 15.6vw, 178px);
  font-family: 'JeanLuc', Arial, Helvetica, sans-serif;
  font-weight: bold;
  line-height: 1em;
  margin: 0;
}

.homepage__subtitle {
  font-size: clamp(27px, 8.5vw, 98px);
  line-height: 1em;
}

.homepage__ctas {
  display: flex;
  gap: 5vh;
  justify-content: center;
  margin: 8vh 0 0;

  a, button {
    border: 2px solid currentColor;
    display: block;
    font-size: clamp(16px, 4vw, 30px);
    line-height: 1em;
    padding: 0.5em 1em;
    text-transform: uppercase;
  }
}

.homepage__sponsors {
  display: flex;
  gap: 4vw;
  justify-content: center;
  padding: 0 1rem;

  img {
    max-height: 200px;
    object-fit: contain;
    max-width: 190px;
    width: auto;
  }
}

.homepage__modal {
  display: none;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;

  video, iframe {
    height: 70%;
    width: 70%;
  }
}

.homepage__modal--open {
  display: block;
}

.homepage__modal-close {
  align-items: center;
  background: #FFF;
  border-radius: 50%;
  color: #000;
  display: flex;
  justify-content: center;
  padding: 8px 15px;
  position: absolute;
  right: 10%;
  top: 15%;

  &::after {
    content: "X";
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 0.2em #000, 0 0 0 0.4em #fff
  }
}

#drupal-live-announce {
  bottom: 0;
}

html, body {
  &:has(.homepage) {
    background: #000;
  }
}