* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: #000; }
body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.35; }
main { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: 20px 0 60px; }
a { color: inherit; text-decoration: none; }
header { margin-bottom: 70px; }
.cover { display: block; width: min(620px, 100%); height: auto; margin: 0 auto 70px; }
.info { margin-bottom: 55px; }
h1 { font-size: 22px; line-height: 1; font-weight: 400; margin: 0 0 5px; }
.info p { margin: 0; }
.music { margin-bottom: 100px; }
.track { appearance: none; width: 100%; display: grid; grid-template-columns: 35px 1fr 45px; gap: 10px; padding: 10px 0; border: 0; border-top: 1px solid #000; background: transparent; color: #000; font: inherit; text-align: left; cursor: pointer; }
.track:last-child { border-bottom: 1px solid #000; }
.track span:last-child { text-align: right; }
.track:hover span:nth-child(2) { text-decoration: underline; }
.player { margin-top: 20px; }
.player button { appearance: none; border: 0; padding: 0; margin: 0 10px 0 0; background: none; color: #000; font: inherit; cursor: pointer; }
#progress { width: 100%; margin: 14px 0 3px; accent-color: #000; }
#time { font-size: 11px; }
.images { display: flex; flex-direction: column; gap: 24px; margin-bottom: 100px; }
.images img { display: block; width: 100%; height: auto; }
.images img:nth-child(2), .images img:nth-child(4), .images img:nth-child(6), .images img:nth-child(8) { width: 72%; }
.images img:nth-child(2), .images img:nth-child(6) { margin-left: auto; }
.credits { margin-bottom: 100px; }
footer { border-top: 1px solid #000; height: 1px; margin-top: 100px; }
@media (max-width: 600px) {
  main { width: calc(100% - 24px); padding-top: 14px; }
  header { margin-bottom: 45px; }
  .cover { margin-bottom: 45px; }
  .images img:nth-child(2), .images img:nth-child(4), .images img:nth-child(6), .images img:nth-child(8) { width: 88%; }
}