.album-page{
  max-width:768px;
  margin-top:0;
  padding:0 16px 50px 16px;
  box-sizing:border-box;
  margin-top:0;
  position:relative;
  min-height:100vh;
  transition:background .5s ease;
}

/* BACK */

.back-btn{
  display:inline-flex;
  width:30px;
  height:30px;
  padding:0;
  margin-top:16px;
  margin-bottom:16px;
  align-items:center;
  justify-content:center;

  transition:
    transform .25s cubic-bezier(.34,1.56,.64,1),
    filter .25s ease;
}

.back-btn img{
  width:30px;
  height:30px;
  display:block;
}

.back-btn:hover{
  filter:brightness(1.05);
}

.back-btn:active{
  transform:scale(.95);
}

/* MOBILE */

.album-layout{
  display:block;
}

.cover-wrap{
  width:50%;
  max-width:250px;
  margin:auto;
  position:relative;
}

.cover{
  width:100%;
  border-radius:10px;
  display:block;
  box-shadow:1px 5px 9px rgba(0,0,0,.12);
}

/* PLAY BUTTON */

.play-btn{
  position:absolute;
  right:-18px;
  bottom:8px;
  transition:
    transform .25s cubic-bezier(.34,1.56,.64,1),
    filter .25s ease;
}

.play-btn img{
  width:50px;
  height:50px;
  display:block;
}

.play-btn:hover{
  filter:brightness(1.05);
}

.play-btn:active{
  transform:scale(.95);
}

/* INFO */

.album-info{
  margin-top:15px;
}

.album-type{
  font-size:15px;
  color:#6f8682;
  text-align:center;
  margin-bottom:3px;
}

.album-title{
  font-size:20px;
  font-weight:800;
  color:#243634;
  text-align:center;
  margin-bottom:3px;
}

.artist{
  font-size:18px;
  color:#6f8682;
  text-align:center;
}

.section-divider{
  text-align:center;
  margin:10px 0;
  font-size:14px;
  letter-spacing:6px;
  color:#6f8682;
  opacity:.5;
}

/* TRACKLIST */

.tracklist{
  margin-top:20px;
  background:rgba(255,255,255,.15);
  border-radius:20px;
  padding:20px;
}

.tracklist h5{
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
  color:#243634;
}

.tracklist ol{
  padding-left:30px;
}

.tracklist li{
  font-size:12px;
  margin-bottom:10px;
  color:#243634;
}

/* VIDEO */

.video-section{
  margin-top:20px;
}

.video-section h6{
  text-align:center;
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
  color:#243634;
}

.video-card{
  border-radius:20px;
  overflow:hidden;
  margin-bottom:40px;
  background:#eee;
}

.video-card iframe{
  width:100%;
  aspect-ratio:16/9;
  border:none;
}

/* DESKTOP */

@media (min-width:768px){

  .album-layout{
    display:flex;
    gap:60px;
    align-items:flex-start;
  }

  .album-left{
    flex:1;
  }

  .album-right{
    flex:1;
  }

  .cover-wrap{
    width:100%;
    max-width:340px;
    margin:0;
  }

  .album-type,
  .album-title,
  .artist{
    text-align:left;
  }

  .tracklist{
    margin-top:0;
  }
  .tracklist h5{
    font-size:16px;
  }
  .tracklist li{
    font-size:14px;
  }
  .section-divider{
    display:none;
  }
}

/* PLAY SHEET */

.play-sheet{
  position:fixed;
  left:0;
  right:0;
  bottom:-100%;
  z-index:9999;
  transition:bottom .3s ease;
}

.play-sheet.show{
  bottom:0;
}

.listen-sheet{
  background:#fff;
  border-radius:24px 24px 0 0;
  padding:24px 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.15);
}

.sheet-title{
  text-align:center;
  font-size:14px;
  font-weight:700;
  color:#243634;
  margin-bottom:12px;
}

.platform{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 20px;
  text-decoration:none;
  color:#243634;
  border-bottom:1px solid #eeeeee;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}

.platform:last-child{
  border-bottom:none;
}

.platform img{
  width:15px;
  height:15px;
  object-fit:contain;
  flex-shrink:0;
}

.platform span{
  font-size:15px;
  font-weight:500;
  color:#243634;
}

.platform:hover{
  background:#f8f8f8;
}

.platform:active{
  transform:scale(0.98);
  background:#f2f2f2;
}

@media (min-width:768px){

  .play-sheet{
    max-width:768px;
    margin:auto;
    left:0;
    right:0;
  }

}