body {
    background: rgb(59, 37, 125);
    margin: 50px;
    color: white;
}
ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 50px;
     list-style: none;
     margin: 0;
     padding: 0;

}

h1 {
    font-size: 100px;
    font-family: fraunces;
}

h2 {
    font-size: 50px;
    font-family: fraunces;
}

li{
   font-size: 30px;
    font-family: fraunces; 
}

p {
     margin: 0;

}

img {

 width:100%;
height: 100%;
object-fit: cover;
filter: grayscale(1)
}

figure:hover img {
  filter: grayscale(0);
}

figure span {
  height: 100%;
  background: paleturquoise;
  transition: all .5s;
  }
  

figure{
    margin: 0;
    aspect-ratio: 3/4;
}

@font-face {
    font-family: "Fraunces";
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    src: url("mafonte/fraunces.woff2") format(woff2) tech(variations),
         url("mafonte/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);
    }

    figcaption {
        opacity: .8;
    }