:root {
  color-scheme: dark;
  background: #0ab9c8;
}

* {
  box-sizing: border-box;
}

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

body {
  display: grid;
  justify-items: center;
  background: #0ab9c8;
  font-family: Arial, Helvetica, sans-serif;
}

.poster {
  position: relative;
  width: min(100%, 1080px);
  aspect-ratio: 1080 / 1920;
  overflow: hidden;
  background: #0ab9c8;
}

.poster__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.playlist {
  position: absolute;
  z-index: 2;
  top: 66.4%;
  left: 5%;
  width: 90%;
  padding: clamp(6px, 1vw, 11px);
  border: clamp(1px, .25vw, 3px) solid rgba(255, 41, 132, .9);
  border-radius: clamp(13px, 2vw, 22px);
  background: rgba(19, 10, 34, .88);
  box-shadow:
    0 12px 28px rgba(34, 4, 62, .38),
    0 0 22px rgba(255, 44, 143, .24);
}

.playlist iframe {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: 12px;
  background: #121212;
}

@media (max-width: 520px) {
  .playlist {
    top: 61.5%;
    left: 4%;
    width: 92%;
    padding: 5px;
    border-radius: 14px;
  }
}