.home-artistes {
  padding: 20px 60px 60px;
}

/* =========================
   TITRE
========================= */

.home-title {
  font-family: "Roboto Slab", serif;
  font-size: 44px;
  font-weight: 600;

  text-align: center;

  line-height: 1;

  margin-top: 10px;
  margin-bottom: 55px;

  color: #111;
}

/* =========================
   GRID
========================= */

.artistes-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 28px;

  max-width: 1450px;

  margin: 0 auto;
}

/* =========================
   ITEM
========================= */

.artiste-item {
  text-decoration: none;
  color: #111;
  display: block;
}

/* =========================
   IMAGE
========================= */

.artiste-image {
  width: 100%;
  overflow: hidden;
  background: #f2f2f2;
}

.artiste-image img {
  width: 100%;

  height: 420px;

  object-fit: cover;
  object-position: center;

  display: block;

  transition:
    transform 0.45s ease,
    opacity 0.3s ease;
}

.artiste-item:hover img {
  transform: scale(1.015);
  opacity: 0.92;
}

/* =========================
   NOM
========================= */

.artiste-item h2 {
  font-family: "Roboto Slab", serif;

  font-size: 17px;

  font-weight: 400;

  text-align: center;

  margin-top: 16px;

  line-height: 1.3;
}

/* =========================
   TABLET
========================= */

@media screen and (max-width: 1300px) {
  .artistes-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .artiste-image img {
    height: 380px;
  }
}

/* =========================
   MOBILE
========================= */

@media screen and (max-width: 900px) {
  .home-artistes {
    padding: 20px 20px 50px;
  }

  .home-title {
    font-size: 36px;
    margin-bottom: 35px;
  }

  .artistes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .artiste-image img {
    height: 260px;
  }

  .artiste-item h2 {
    font-size: 15px;
    margin-top: 12px;
  }
}

/* =========================
   PETIT MOBILE
========================= */

@media screen and (max-width: 560px) {
  .artistes-grid {
    grid-template-columns: 1fr;
  }

  .artiste-image img {
    height: 420px;
  }

  .home-title {
    font-size: 32px;
  }
}