* {
  box-sizing: border-box;
}
body {
  margin:0;
  font-family: "Roboto", sans-serif;
}
.wrapper {
  padding:10px;
}
img {
  display: block;
  max-width:100%;
}
.btn {
  padding:15px;
  border:1px solid #b3b2c2;
  border-radius:5px;
  margin:15px 0;
  transition:.3s all ease-in-out;
}
.btn:hover {
  background:#040037;
  color:#fff;
}

.cards {
  display: flex;
  flex-wrap:wrap;
  gap:10px;
}
.card {
  width:calc((100% / 5) - 40px / 5);
  transition:.3s all ease-in-out;
}

.card__img {
  position: relative;
}
.card__img img {
  border-radius:5px;
  transition:.3s all ease-in-out;
}
.card:hover img {
  filter:grayscale(1);
  scale:1.02;
}
.info-box {
  position: absolute;
  bottom:10px;
  left:10px;
  display: flex;
}
.info-box span {
  padding:6px 8px;
  font-size: 12px;
  margin-right: 10px;
}
.info-box--white {
  background:#fff;
}
.info-box--orange {
  background:#ea6027;
  color:#fff;
}

.btn {
  text-decoration: none;
}
.card__nfo {
  color:#040037;
  display: flex;
  flex-direction: column;
  align-items:flex-start;
}
.card__nfo a {
  color:inherit;
  font-size: 14px;
}
h2 {
  font-size: 15px;
  font-weight: 400;
  margin-top: 20px;
}
.price {
  font-weight: 700;
}
.fa-solid {
  margin-right: 10px;
}

@media screen and (max-width:1400px) {
  .card {
    width:calc((100% / 4) - 30px / 4);
  }
}

@media screen and (max-width:1024px) {
  .card {
    width:calc((100% / 3) - 20px / 3);
  }
}
@media screen and (max-width:800px) {
  .card {
    width:calc((100% / 2) - 10px / 2);
  }
}
@media screen and (max-width:500px) {
  .card {
    width:100%;
  }
}