.axili-page {
  padding-top: var(--axili-header-height);
  min-height: 50dvh;
  overflow-x: hidden;
  /* background-color: hsl(var(--axili-title));
  color: hsl(var(--axili-background), 0.75); */
}

.axili-page > .container {
  padding-top: 6rem;
  padding-bottom: 2rem;
}

.axili-page > .container:has(.game-page) {
  max-width: none;
  padding: 0;
  position: relative;
}
.game-page {
  position: relative;
  min-height: 100dvh;
}
.axili-page > .container:has(.game-page) .game-page-video {
  position: relative;
  min-height: calc(100dvh - var(--axili-header-height));
  /* aspect-ratio: 151 / 61; */
}
.axili-page > .container:has(.game-page) .game-page-video > video {
  inset: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.game-page-info {
  position: absolute;
  bottom: 2rem;
  left: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  z-index: 1;
  pointer-events: none;
}

.game-page-logo {
  height: 256px;
  margin-left: auto;
  filter: drop-shadow(0px 0px 12px hsl(var(--axili-background)));
}
@media screen and (max-width: 768px) {
  .game-page-logo {
    height: 128px;
  }
}

.game-page-logo.horizontal {
  height: 128px;
}
.game-page-title {
  text-align: center;
  font-size: 3rem;
  margin-top: 6rem;
  padding: 0 4rem;
}
.game-page-description {
  margin-bottom: 6rem;
}

.game-page-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 6rem;
}
.game-page-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto;
  outline: none;
  border: none;
  font-size: 1.25rem;
  background-color: hsl(var(--axili-primary));
  padding: 1rem 2rem;
  border-radius: var(--axili-btn-radius);
  transform: scale(1);
  transition:
    transform 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  box-shadow:
    hsl(var(--axili-primary), 0.24) 0px 0px 0px 1px,
    hsl(var(--axili-primary), 0.1) 0px 12px 12px -6px,
    hsl(var(--axili-primary), 0.36) 0px 24px 24px -12px;
}
.game-page-button:hover,
.game-page-button:focus-visible {
  transform: scale(1.1);
  box-shadow:
    hsl(var(--axili-primary), 0.34) 0px 0px 0px 1px,
    hsl(var(--axili-primary), 0.2) 0px 12px 12px -6px,
    hsl(var(--axili-primary), 0.46) 0px 24px 24px -12px;
}
.game-page-button:focus-visible {
  outline: hsl(var(--axili-title));
  outline-width: 2px;
  outline-style: solid;
}

.game-page .axili-slides {
  margin-bottom: 12rem;
}
