body {
  background-color: rgb(194, 194, 194);
  background-image: url(./img/voyages.jpg);
}

:root {
  --photwidth: 15vw;
}

.lettres-comment a:hover {
  color: #013710;
}

@media (min-width: 800px) {
  header {
    grid-column: 1 / 5;
  }

  .page-content {
    display: grid;
    position: absolute;
    top: 5vh;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, var(--photwidth));
    font-size: 1.3vw;
    align-items: center;
  }

  .card {
    width: 10vw;
    height: 10vw;

  }

}

@media (min-width: 1500px) {
  header {
    grid-column: 1 / 6;
  }

  .page-content {
    display: grid;
    position: absolute;
    top: 5vh;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, var(--photwidth));
    font-size: 1.3vw;
    align-items: center;
  }

  .card {
    width: 15vw;
    height: 15vw;
    padding-bottom: 20px;

  }

}

a:nth-child(2) .card:before {
  background-image: url(./img/Guadeloupe.JPG);
}

a:nth-child(3) .card:before {
  background-image: url(./img/LanzaroteII.jpg);
}

a:nth-child(4) .card:before {
  background-image: url(./img/Lanzarote.jpg);
}

a:nth-child(5) .card:before {
  background-image: url(./img/CabodeSaoVicente.jpg);
}

a:nth-child(6) .card:before {
  background-image: url(./img/Gran\ Canaria.jpg);
}

a:nth-child(7) .card:before {
  background-image: url(./img/Corfou.jpg);
}


a:nth-child(8) .card:before {
  background-image: url(./img/Rhodes.jpg);
}

a:nth-child(9) .card:before {
  background-image: url(./img/Lassithi.jpg);
}

a:nth-child(10) .card:before {
  background-image: url(./img/GizehMykerinos2.jpg);
}

a:nth-child(11) .card:before {
  background-color: #333;
}

.content img {
  height: auto;
  width: 3em;
}