@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Mulish:ital,wght@0,700;1,300&display=swap');


.asc{
  display: flex;
  flex-wrap: wrap;
}

div h3{
  position: relative;
  top: 10px;
  font-size: 90%;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  text-decoration: none;
  color: black;
}
div h2{
  font-size: 90%;
  font-family: 'Poppins', sans-serif;
  text-align: left;
  text-decoration: none;
  color: black;
  font-weight: 400;
}

.carta {
  width: 100%;
  margin: 10px;
  border-radius: 10px;
  background: #f3d9f3;
    border:2px solid #d3b1d3;
}

.c{
  font-family: sans-serif;
  width: 22%;
  
}
.c .img-container{
  overflow: hidden;
  left: 10%;
  height: 123px;
  width: 200px;
  position: relative;
  border-radius: 15px;
}
.c .img-container img{
  width: 100%;
  position: absolute;
  transition: all 0.5s;
}
.c:hover .img-container img{
  transform: scale(1.2);
}

.c .info-container{
  display: flex;
  flex-wrap: wrap;
  text-align: left;
  justify-content: center;
}
.c .info-container h3{
  margin: 0;
}
.c .info-container h3{

  padding: 5px 15px;
  width: 90%;
}
.c .info-container h2{
  padding: 10px 5px;
  width: 90%;
}
.c .add-carta{
  margin-top: 2px;
  text-decoration: none;
  color: white;
  background-color: black;
  padding: 15px;
  border: 1px solid black;
  border-radius: 25px;
}
.c .add-carta:hover{
  color: black;
  background-color: transparent;
  border: 1px solid black;
}


@media print{
    .c{
        font-family: sans-serif;
        width: 30%;
  
    }
}