.the_beers {
  margin: 0 5vw;
  display: flex;
  /* Pour qu'il se mette automatiquement l'un au dessus de l'autre quand pas assez de place */
  /* flex-wrap: wrap; */
  gap: 1vw;
}

.beer {
  display: inline;
  width: 50%;
  transform: scale(1);
  transition: 300ms ease-in-out;
}

.beer img {
  width: 20vw;
  height: auto;
  border-radius: 15px;
  cursor: pointer;
}

.beer:hover {
  transform: scale(1.05);
  transition: 300ms ease-in-out;
}

.beer_title {
  font-family: vintage;
  color: #013870;
  font-size: 1.5vw;
  text-align: center;
}

.beer_desc {
  width: 50vw;
  top: 20vh;
  left: 25vw;
  padding: 1vw 1vw;
  justify-content: space-between;
  flex-direction: column;
  position: fixed;
  background-color: rgb(186, 186, 186);
  border-radius: 1vw;
  color: white;
  z-index: 10; /*Met la description devant tout*/
  transform: scale(0);
  transition: 300ms ease-in-out;
}

.beer_desc.active {
  transform: scale(1);
  transition: 300ms ease-in-out;
}

.desc_header {
  display: flex;
  justify-content: space-between;
  padding: 1vw;
}

.close_desc {
  cursor: pointer;
  background: none;
  outline: none;
  border: none;
  width: 3vw;
  font-size: 2vw;
  font-weight: bold;
}

.desc_title {
  display: flex;
  text-align: center;
}

.desc_title p {
  font-family: vintage;
  font-size: 1.5vw;
  text-align: center;
  color: #ffffff;
}

.desc_title img {
  width: 1.5vw;
  margin-right: 1vw;
}

.beer_summary,
.beer_ingredients {
  font-size: 1.5vw;
  text-align: justify;
}

.beer_degree {
  font-weight: bolder;
  font-size: 1.7vw;
  margin: 2vh 0;
}

@media screen and (max-width: 550px) {
  .the_beers {
    flex-wrap: wrap;
    gap: 5vw;
  }

  .beer {
    width: 40vw;
    flex-direction: column-reverse;
  }

  .beer_title {
    font-size: 3.5vw;
  }

  .beer img {
    width: 100%;
  }

  .beer_desc {
    width: 80vw;
    left: 10vw;
    padding: 2vh 2vw;
  }

  .desc_title img {
    width: 3vw;
  }

  .close_desc {
    width: 5vw;
    font-size: 5vw;
  }

  .desc_title p {
    font-size: 3vw;
  }

  .beer_summary,
  .beer_ingredients {
    font-size: 3vw;
  }

  .beer_degree {
    font-size: 3.3vw;
  }
}