:root { background: #f8bfd0; }

* { box-sizing: border-box; }

body { min-width: 320px; min-height: 100vh; margin: 0; background: #f8bfd0; }

.mixtape-page { display: grid; min-height: 100vh; place-items: center; overflow: hidden; }

.mockup-frame { position: relative; width: min(100vw, calc(100vh * 1.5988)); }

.mockup-frame img { display: block; width: 100%; height: auto; }

/* The transparent link sits over the mockup's handwritten "click here" prompt. */
.playlist-link { position: absolute; top: 58%; left: 43%; width: 39%; height: 29%; border-radius: 12%; }
.playlist-link:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

@media (max-aspect-ratio: 1/1) {
  .mockup-frame { width: 100vw; }
}