:root {
  --title: #6a0b4f;
  --outer: #fff7f7;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--outer);
}

body {
  display: grid;
  place-items: center;
}

/* Ratio exact d'un écran Full HD vertical : 1080 × 1920. */
.viewport {
  position: relative;
  width: min(100vw, 56.25vh);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--outer);
  container-type: inline-size;
}

.screen {
  position: absolute;
  inset: 1.25% 2.13% 1.2%;
  overflow: hidden;
  border-radius: 2.13cqw;
  background: #f5d1e3 url("assets/background.png") center / 100% 100% no-repeat;
}

.content {
  position: absolute;
  inset: 0;
  color: var(--title);
  text-align: center;
}

h1 {
  position: absolute;
  top: 12.55%;
  left: 2%;
  width: 96%;
  margin: 0;
  font-family: "ringold-sans", "Arial Narrow", sans-serif;
  font-size: 5.5556cqw;
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: lining-nums proportional-nums;
  line-height: 1.35;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

h1 span,
p span {
  display: block;
  white-space: nowrap;
}

p {
  position: absolute;
  top: 22.55%;
  left: 2%;
  width: 96%;
  margin: 0;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 2.2222cqw;
  font-weight: 500;
  font-style: normal;
  line-height: 1.55;
}

.wines {
  position: absolute;
  top: 30.1%;
  left: 50%;
  width: 70.5%;
  height: auto;
  display: block;
  transform: translateX(-50%);
}

.lion {
  position: absolute;
  right: 3.8%;
  bottom: -0.05%;
  width: 46.6%;
  height: auto;
  display: block;
}

/* Repli pour de très vieux navigateurs sans unités de conteneur. */
@supports not (font-size: 1cqw) {
  h1 { font-size: min(5.5556vw, 3.125vh); }
  p { font-size: min(2.2222vw, 1.25vh); }
  .screen { border-radius: min(2.13vw, 1.2vh); }
}