@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;500;700&display=swap');


*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --french-clr: hsl(0, 0%, 0%); /* #000000*/
    --catalan-clr: Gray; /*hsl(0, 0%, 50%);  #808080*/
    --castillan-clr: Teal; /*rgb(70, 103, 103); #466767*/
    --grey-clr:silver; /*rgb(190, 190, 190);*/
    --smoke-clr:WhiteSmoke;
    --overlay-menu-clr:hsla(0, 0%, 100%, 0.872);
    --mainrouge-clr:hsl(2, 81%, 46%); /*#d61c17*/
    --font13:0.813rem;
    --font14:0.875rem;
    --font15:0.938rem;
    --font16:1rem;
    --font17:1.063rem;
    --font18:1.125rem;
    --font20:1.25rem;
    --font22:1.375rem;
}


.contenu-retro-grid{
    max-width: 420px;
    margin: 0 auto;
    h1{
        font-size: 1.7rem;
        font-weight: bold;
        color: var(--mainrouge-clr);
        margin-bottom: 10px;
    }

    h2{
        font-size: 1.5rem;
        color: var(--mainrouge-clr);
        margin: 25px 0px 20px;
    }
}

.retro-grid{
  display: grid; 
  grid-auto-rows: 1fr; 
  grid-template-columns:  repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr; 
  grid-template-rows: 1fr; 
  gap: 0 10px; 
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding: 0 5px;

  img{
    width: 75%;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  }
  
  p{
    text-align: center;
    padding: 10px 0px;
    text-wrap: balance;
  }

  a{
    text-decoration: none;
    color: #000;
  }
  a:hover{
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  
}


/*/////////////// GALERIE ///////////////*/

.contenu-retro{
    max-width: 880px;
    margin: 0 auto;
    h1{
        font-size: 1.7rem;
        font-weight: bold;
        color: var(--mainrouge-clr);
        margin-bottom: 10px;
    }
}

.gallery{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap:1vmin;
    padding: 0 14px;
}

.gallery::after{
    content: "";
    display: block;
    flex-grow: 10; /*évite que sur la dernière ligne s'il n'y a qu'une image, ça l'étende à 100%*/
}

.gallery li{
    list-style-type: none;
    height:160px;
    flex-grow: 1;
}

.gallery img{
    width:100%;
    height: 100%;
    object-fit: cover;
}

.retro-credits{
    font-size: var(--font14);
    padding: 20px 12px;
    margin:0 auto;
    text-align: left;

}

@media screen and (max-width:458px){
    .retro-grid{
        align-items: start;
        gap: 20px 0px; 
        grid-auto-rows: 0.75fr; 
        grid-template-rows: 0.75fr; 
        img{
            width: 40%;
        }
    }
    p{
        text-align: center;
        padding: 0px;
        line-height: 10px;
        font-size: var(--font20);
      }

    .retro-credits{
        text-align: justify;    
        text-wrap: balance;
        line-height: 13pt;
    }

    .gallery::after{
        content: "";
        display: none;
        
    }
}