/* ========================
MUSIC CARDS
=========================*/
  
.musiccard {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.musiccard_item {
  display: flex;
   max-width: 1760px; 
}

.musiccard_image { 
  max-height: 880px;
  margin-top: -24px;
  margin-bottom: -24px;
  img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  &:after {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    position: relative;
    top: -100px;
    background: linear-gradient(0deg,  10%, rgba(0, 0, 0, 0) 100%);
  }
}

.musiccard {
  background-color: var(--card-bg);
  border-radius: 0.25rem;
   display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding-top: 1rem;
}

.musiccard_content {
  padding: 1rem;
  z-index: 100;
  display: block;
}

.musiccard h2 {
   margin-top: -300px;
  margin-bottom: 24px; 
  background-color: var(--color-highlight);
   margin-left: 2rem;
  margin-right: 2rem;
}

.musiccard p {   
  background-color: var(--color-highlight);
  color: var(--text-color); 
  padding: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
}

.musiccard small {
  font-size: 0.7rem;
    padding: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 2rem;
   color: var(--text-color); 
   background-color: var(--color-highlight);
     word-wrap: break-word;
  overflow-wrap: break-word; 
   word-break: break-all;
}

.musiccard ul,
.musiccard ol,
.musiccard li {
  padding: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  background-color: var(--color-highlight);
  color: var(--text-color); 
} 
 
#item_fig .musiccard:after {
  content: "Seasonal";
   color: rgba(234, 225, 175, 0.8);
  font-weight: 600;
   display: block;
  width: 10ch;
  height: 1.5em;
  padding: 0.2em 0.4em;
  position: relative;
  bottom: calc(100% - 2.5em);
  left: 1em;
}

 @media (max-width: 768px) {
  .musiccard_image img {
    height: 100vh;      
    max-height: none;      
    width: 100%;
    object-fit: cover;
  }

  .musiccard h2 {
    margin-top: -200px;    
  }
}

 @media (max-width: 400px) {
  .musiccard_image {
    height: auto;           
    width: auto;
   }

  .musiccard h2 {
    margin-top: -200px;    
  }

  .musiccard p {
    padding: 1rems;
  }
}

 @media (max-width: 400px) {
  .musiccard_content p {
    padding: 8px;
  }
}