.playlistElement
{
   width:90%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border-radius: 8px;
   background: var(--Blue1, #2A3E50);
   margin: 48px 0;
}
.playlistElement[open="false"] .playlist
{
   display: none;
}
.playlist
{
   width: 90%;
   border-left: 2px solid #F2E4C4;
   padding-left: 32px;
   padding-top: 10px;
   margin-top: 24px;
   margin-bottom: 24px;
   background: var(--Blue1, #2A3E50);
   border-left: 1px solid var(--Gold-1, #F2E4C4);
}
.playlistContent
{
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.playlistButton
{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   width: 100%;
   background: var(--Blue1, #13293D);
   border-radius: 8px 8px 8px 8px;
   padding: 15px 0;
}
.playlistElement[open="true"] .playlistButton
{
   border-radius: 8px 8px 0 0 ;
   border-bottom: 1px solid #DEBB6B;
}
.playlistTitle
{
   color: var(--Gold-1, #DEBB6B);
   font-family: var(--font-family-headline);
   font-size: 40px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: -0.2px;
   border-left: 8px solid #DEBB6B;
   transform: translateX(-33px);
   margin-bottom: 8px;
   padding-left: 24px;
}
.playlistDateContainer
{
   color: var(--Gold-2, #F2E4C4);
   font-family: var(--font-family-text);
   font-size: 17px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 0.043px;
   padding-bottom: 32px;
}
.playlistItem
{
   display: flex;
   align-items: center;
   gap: 32px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--Gold-2, #F2E4C4);
}
.playlistItem:last-child
{
   border-bottom: none;
}
.playlistItemCover
{
   width: 80px;
   height: 80px;
   border-radius: 4px;
}
.timeAndChannel
{
   margin-right: 10%;
   display: flex;
   flex-direction: column;
   gap: 8px;
}
.playlistItemTime,
.playlistItemChannel
{
   color: var(--Gold-2, #F2E4C4);
   font-family: var(--font-family-text);
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.045px;
}
.artistAndTitle
{
   flex: 1;
}
.playlistItemTitle
{
   font-family: var(--font-family-headline);
   font-size: 24px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.06px;
}
.playlistItemArtist
{
   color: var(--Gold-2, #F2E4C4);
   font-family: var(--font-family-text);
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.05px;
}
@media screen and (max-width: 700px) 
{
   .playlistElement
   {
      width: 100%;
      background: #13293D;
   }
   .playlist
   {
      background: #13293D;
      width: calc(100% - 48px)
   }
   .playlistElement[open="true"]{
      margin-bottom: 0;
   }
   .playlistItemTitle
   {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.045px;
   }
   .playlistItemArtist
   {
      font-size: 14px;
      letter-spacing: 0.035px;
   }
   .playlistItemTime,
   .playlistItemChannel
   {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.035px;
   }
   .playlistItemTitle
   {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.045px;
   }
   .playlistItemArtist
   {
      font-size: 14px;
      letter-spacing: 0.035px;
   }
   .playlistItemTime,
   .playlistItemChannel
   {
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.035px;
   }
}