* {
  box-sizing: border-box;
}

:root {
  --poster-ratio: 5120 / 2160;
  --gold: rgba(218, 204, 144, 0.78);
  --white: #fff;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background: #000;
  font-family: "Montserrat", Arial, sans-serif;
}

.poster {
  position: relative;
  width: 100vw;
  aspect-ratio: var(--poster-ratio);
  max-height: 100svh;
  overflow: hidden;
  background: url("background.jpg") center / 100% 100% no-repeat;
}

.poster__text {
  position: absolute;
  z-index: 1;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0;
  transform: translate(-50%, -50%);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.poster__art {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
  user-select: none;
}

.poster__logo-art {
  left: 50%;
  top: 31.5%;
  width: 23.4%;
}

.poster__date-art {
  left: 50%;
  top: 68.45%;
  width: 24.1%;
}

.poster__divider {
  left: 50.0%;
  top: 56.48%;
  width: 19.7%;
  color: var(--white);
  font-size: clamp(0.38rem, 1.03vw, 3.3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.39em;
}

.poster__chapter {
  left: 50.0%;
  top: 64.33%;
  width: 14.9%;
  color: var(--white);
  font-size: clamp(0.28rem, 0.57vw, 1.82rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.34em;
}

.poster__distribution {
  left: 50.0%;
  top: 76.74%;
  width: 21.7%;
  color: var(--white);
  font-size: clamp(0.3rem, 0.77vw, 2.45rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.035em;
}

.poster__company {
  left: 50.0%;
  top: 80.6%;
  width: 22.2%;
  color: var(--white);
  font-size: clamp(0.55rem, 1.66vw, 5.3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

.poster__license {
  left: 50%;
  top: 88.42%;
  width: 23.4%;
  color: var(--white);
  font-size: clamp(0.22rem, 0.31vw, 1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  white-space: normal;
}

.poster__rights {
  left: 50%;
  top: 90.1%;
  width: 23.4%;
  color: var(--white);
  font-size: clamp(0.2rem, 0.29vw, 0.95rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

@media (min-aspect-ratio: 5120 / 2160) {
  .poster {
    height: 100svh;
    width: auto;
  }
}

@media (max-width: 768px), (max-aspect-ratio: 4 / 5) {
  :root {
    --poster-ratio: 9 / 16;
  }

  body {
    overflow-y: auto;
  }

  .poster {
    width: min(100vw, calc(100svh * 9 / 16));
    min-height: 100svh;
    max-height: none;
    margin: 0 auto;
    background: url("mobile_background.jpg") center / 100% 100% no-repeat;
    container-type: inline-size;
  }

  .poster::before {
    content: none;
  }

  .poster__text {
    display: block;
  }

  .poster__logo-art {
    left: 50%;
    top: 22.25%;
    width: 58%;
  }

  .poster__date-art {
    left: 50%;
    top: 52.1%;
    width: 62%;
  }

  .poster__divider {
    left: 50%;
    top: 42.1%;
    width: 69.5%;
    font-size: 4.05cqw;
    line-height: 1;
    letter-spacing: 0.39em;
    transform: translate(-50%, -50%) scaleX(0.84);
  }

  .poster__chapter {
    left: 50%;
    top: 49.35%;
    width: 61%;
    font-size: 2.62cqw;
    line-height: 1;
    letter-spacing: 0.34em;
    transform: translate(-50%, -50%) scaleX(0.86);
  }

  .poster__distribution {
    left: 50%;
    top: 82.45%;
    width: 67%;
    font-size: 2.73cqw;
    line-height: 1;
    letter-spacing: 0.04em;
    transform: translate(-50%, -50%) scaleX(0.9);
  }

  .poster__company {
    left: 50%;
    top: 85.33%;
    width: 63.5%;
    font-size: 4.75cqw;
    line-height: 1;
    letter-spacing: 0.045em;
    transform: translate(-50%, -50%) scaleX(0.84);
  }

  .poster__license {
    left: 50%;
    top: 89.82%;
    width: 64%;
    font-size: 1.08cqw;
    line-height: 1.18;
    white-space: normal;
  }

  .poster__rights {
    left: 50%;
    top: 91.55%;
    width: 55%;
    font-size: 1.02cqw;
    line-height: 1;
  }
}