/*img {
  width: 100%;
} */
@font-face {
  /* index/fonts/martianmono-variablefontwdth-wght.ttf */
  font-family: "Martian Mono";
  src: url("../fonts/martianmono-variablefontwdth-wght.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
 body {
  font-family: "Martian Mono", monospace;
}
 ul {
  display: grid;                      
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  list-style: none;
  padding: 0;
}

li:hover {
  background: orange;
}

.musique {
  font-family: "Martian Mono", monospace;
  text-align: left;
  background: lightpink;
}

.cinema {
  font-family: "Martian Mono", monospace;
  text-align: left;
  background: palegreen;
}
.graphart {
  font-family: "Martian Mono", monospace;
  text-align: left;
  background: paleturquoise;
}
.literature {
  font-family: "Martian Mono", monospace;
  text-align: left;
  background: orchid;
}
.musique-grid,
.cinema-grid,
.graphart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0 40px;
}

.musique-grid figure,
.cinema-grid figure,
.graphart-grid figure {
  background: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
}

.musique-grid img,
.cinema-grid img,
.graphart-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.musique-grid figcaption,
.cinema-grid figcaption,
.graphart-grid figcaption {
  margin-top: 6px;
  font-weight: 600;
  font-size: 1rem;
}
figcaption {
  font-family: "Martian Mono", monospace;
  font-size: 1rem;
  font-weight: 500;
}