body{background-color: YellowGreen;
    font-size: 30px;
    color: DarkOliveGreen ;
    font-family: "Frames Part One";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
   

}
.grille{ 
    margin: 50px; ;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 50px;   
    
}

figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  
}
figure span {
  height: 100%;
  transition: all .5s;
   background-color:rgb(255, 0, 85) ;
}

figure:hover img {
  filter: grayscale(0);
}
figure:hover span {
  background: white;
}
figure figcaption {
  padding-top: .5em;
}
h1{
   
    color:  crimson;
    font-size: 80px;
    padding-bottom: 50px;
    padding-right:20px;
    text-align: right;
    margin-bottom:50px;
    font-family: "Destra";
    
   
    
}
h2{
   
    font-size: 50px;
    margin-left: 40px;
    font-family: "Frames Part One";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
 

}


h2:hover{
  background-color:  beige ;
  color: crimson;
  font-size: 60px;
 
 
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 1;
  filter: grayscale(1);
  mix-blend-mode: multiply;
  transition: all .5s;
}
.Musique:hover{
  background-color: rgb(179, 241, 108);
  padding-bottom: 50px;
  padding-top:20px;
}

.Cinéma:hover{
  background-color: rgb(179, 241, 108);
  padding-bottom: 50px;
  padding-top:20px;
}

@font-face {
    font-family: "Fraunces";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("fraunces/fraunces.woff2") format(woff2) tech(variations),
         url("fraunces/fraunces.woff2") format("woff2-variations");
}
.fraunces {
    font-variation-settings: "opsz" var(--fraunces-opsz, 9), "wght" var(--fraunces-wght, 900), "SOFT" var(--fraunces-SOFT, 0), "WONK" var(--fraunces-WONK, 1);
}@font-face {
    font-family: "Fraunces";
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    src: url("fraunces/fraunces-italic.woff2") format(woff2) tech(variations),
         url("fraunces/fraunces-italic.woff2") format("woff2-variations");
}
.fraunces {
    font-variation-settings: "opsz" var(--fraunces-opsz, 9), "wght" var(--fraunces-wght, 900), "SOFT" var(--fraunces-SOFT, 0), "WONK" var(--fraunces-WONK, 1);
}

@font-face{
  font-family: "Destra";
  src: url("/index/css/destra.zip") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Destra";
  src: url("/index/css/destra/Destra-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/index/figtree/Figtree-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
} 
.fraunces {
    font-variation-settings: "opsz" var(--fraunces-opsz, 9), "wght" var(--fraunces-wght, 900), "SOFT" var(--fraunces-SOFT, 0), "WONK" var(--fraunces-WONK, 1);
}@font-face {
    font-family: "Fraunces";
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    src: url("fraunces-italic.woff2") format(woff2) tech(variations),
         url("fraunces-italic.woff2") format("woff2-variations");
}
@font-face {
    font-family: "Frames Part One";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("/index/css/frames-part-one/framespartone-medium.woff2") format("woff2"),
         url("/index/css/frames-part-one/framespartone-medium.woff2") format("woff");
}