@import url("https://rsms.me/inter/inter.css");
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  --poster-size: 95vmin;
  --ratio: 1 / 1.41;
  --inner-ratio: 1 / 1.18;
  font-family: "Inter", sans-serif;
  font-size: calc(var(--poster-size) / 100);
}

body {
  display: grid;
  min-height: 100vh;
  background: #030303;
  place-items: center;
}

.poster {
  --color--background: hsl(53, 10%, 69%);
  --color--neutral: hsl(0, 50%, 1%);
  --color--red: hsl(355, 78%, 44%);
  --color--blue: hsl(259, 48%, 28%);
  --color--purple: hsl(281, 82%, 19%);
  --color--green: hsl(152, 29%, 31%);
  font-size: 1.1rem;
  font-weight: 600;
  position: relative;
  display: grid;
  overflow: hidden;
  width: calc(var(--poster-size) * var(--ratio));
  height: var(--poster-size);
  color: var(--color--neutral);
  background-color: var(--color--background);
}
.poster__inner {
  display: grid;
  width: calc(var(--poster-size) * var(--inner-ratio));
  transform: translateX(7rem) translateY(13rem) rotate(-45deg);
  grid-template-columns: 0.5fr 1.2fr 1fr 1.3fr 2.2fr;
  grid-column-gap: 2rem;
  align-content: start;
}
.poster__location {
  grid-column: 4;
}
.poster__header {
  grid-column: 4 / -1;
  font-size: 5.9rem;
  font-weight: 700;
  margin: 1rem 0;
  letter-spacing: -0.3rem;
}
.poster__date {
  grid-column: 4;
}
.poster__highlight {
  grid-column: 2 / span 2;
  font-size: 5.9rem;
  font-weight: 700;
  margin: 1rem 0;
  letter-spacing: -0.3rem;
}
.poster__highlight--red {
  color: var(--color--red);
}
.poster__highlight--blue {
  color: var(--color--blue);
}
.poster__highlight--purple {
  color: var(--color--purple);
}
.poster__highlight--green {
  color: var(--color--green);
}
.poster__highlight--right {
  grid-column: 4 / -1;
}
.poster__name {
  text-align: right;
  grid-column: 3;
}
.poster__performance {
  grid-column: 4;
}
.poster__ensemble {
  display: grid;
  grid-column: span 2;
  grid-auto-flow: column;
}
.poster__footer {
  display: grid;
  margin-top: 3rem;
  align-items: end;
  grid-column: 2 / -1;
  grid-template-columns: 1fr 1.4fr;
}