:root{
  --card__height: 80%;
  --card__width: 80%;
}

#mainCredits {
  z-index: 1;
  background-position: center center;
}
  #mainCredits .backgroundArticle {
    z-index: 2;
  }

  #mainCredits .content--wide  {
    z-index: 3;
    align-self: center;
    place-content: space-evenly;
    gap: 2rem; 
  }
  
  .creditsCard__wrapper{
    width: 100%; 
    place-content: space-evenly; 
    gap: 1rem;
  }
/*----------------------------------------------------*/

#mainCredits .mediaContent__img--landscape{
  width: clamp(250px, var(--card__width), 400px);
  max-height: minmax(200px,  300px); 

  border-radius: 1rem;
  overflow: hidden;
}


#mainCredits .mediaContent__img--portait{
  width: clamp(100px, var(--card__height), 400px);
  height: minmax(200px,  300px);
  border-radius: 1rem;
  overflow: hidden;
}

  @media (width > 400px) {
    #mainCredits .mediaContent__img--portait, 
    #mainCredits .mediaContent__img--landscape{
      --card__height: 60%;
      --card__width: 60%;
    }
  }  

  @media (width > 500px) {
    #mainCredits .mediaContent__img--portait, 
    #mainCredits .mediaContent__img--landscape{
      --card__height: 70%;
      --card__width: 70%;
    }
  }
  @media (width > 800px) {
    #mainCredits .mediaContent__img--portait, 
    #mainCredits .mediaContent__img--landscape{
      --card__height: 80%;
      --card__width: 90%;
    }
  }

.creditsCard__content{

  width: 90%;
  height: clamp(50px, 40%, 100px);
  margin-inline: auto;

  border-radius: 1rem;
  margin-bottom: 10px;

  z-index: 10;
}

  @media (width > 400px) {
      .creditsCard__content{

          width: 80%;
          height: clamp(50px, 40%, 100px);
          margin-inline: auto;

          border-radius: 1rem;
          margin-bottom: 10px;
      }
  }
  .creditsCard__content .flex-row{
    flex-direction: row;
    flex-wrap: nowrap;


    place-content: space-between;
  }

  .creditsCard__content .flex-row p{
   
    text-indent: 0;

  }

  .credits__card__title {
    font-size: 1.25rem;
    line-height: 1.1;
  }
  
  .credits__card__link {
    font-style: italic;
    font-size: .9rem;
  }

  .credits__card__music {

    width: 300px; 
    height: 300px; 

    background: linear-gradient(hsl(var(--clr-main2--l)), 60%,hsl(var(--clr-main1--l))) ;

    border-radius: 32% 68% 23% 77% / 73% 37% 63% 27% ;
  }
/*-------------------------------- */
  @media (width >= 35em){


    .content--wide:hover .mediaContent__img--landscape,
    .content--wide:hover .mediaContent__img--portait,
    .content--wide:hover .credits__card__music  {

      rotate: 3deg;
      scale: 0.9;
  
    }

  
      .content--wide .mediaContent__img--landscape:hover,
      .content--wide .mediaContent__img--portait:hover,
      .content--wide .credits__card__music:hover {
        z-index: 999;

        rotate: 0deg;
        scale: 1.1;
    }


      .content--wide .mediaContent__img--landscape:not(:hover),
      .content--wide .mediaContent__img--portait:not(:hover),
      .content--wide .credits__card__music:not(:hover) {
        animation: zIndexHack 2s;
      }
}      

/*  u t i l i t y */

@keyframes zIndexHack {
  0%, 100% {
    z-index: 10;
  }
}


  .background__icon img{
    display: inline;
    width: 30px;
    height: 30px;
  
    object-fit: cover;
    overflow: hidden;
  }