body {
      display: grid;
      place-items: center;
      height: 100vh;
      margin: 0;
      background-color: hsl(30, 38%, 92%);
      color: hsl(212, 21%, 14%);
      font-family: 'Montserrat';
      font-weight: 700;
      
}

.card {
      width: 50%;
      background-color: #fdfdff;
      border-radius: 0.5em;
      box-shadow: 2px 3px 7px 2px rgb(0 0 0 / 2%);
      display: flex;
      flex-direction: row;
      overflow: visible;
}

#img-pc{
      display: block;
}
#img-mobile{
      display: none;
}

@media (max-width: 1100px) {
      .card {
            margin: 2% 2%;
            flex-wrap: wrap;
            width: auto;
      }
      #img-mobile{
            display: block;
            border-radius: 0.5em 0.5em 0 0;
      }
      #img-pc{
            display: none;
      }
      .titulo-h1{
            font-size: 2em;
      }
      .descripcion{
            font-size: 16px;
      }
}

.col {
      display: flex;
      width: 100%;
      max-height: 100%;
      flex-direction: column;
}

img {
      width: 100%;
      height: 100%;
      border-radius: 0.5em 0 0 0.5em;

}

button {
      width: 100%;
      height: 4rem;
      font-size: 1.2em;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      color: #fdfdff;
      background-color: hsl(158, 36%, 37%);
      border: none;
      border-radius: 10px;
      margin: 3% 0;
      cursor: pointer;
}

button:hover {
      background-color: hsl(158, 40%, 26%);
      color: #ffffff;
}

#col2 {
      padding: 4%;
}

span {
      font-size: 45px;
      color: hsl(158, 36%, 37%);
      font-family: 'Fraunces', sans-serif;
      font-weight: 700;
      
}

h1 {
      font-family: 'Fraunces', sans-serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
      margin-top: 2%;
      margin-bottom: 2%;
}
h3{
      font-weight: 500;
      font-stretch:extra-expanded;
      margin-bottom: 1%;
}

.icon-cart {
      background-image: url('images/icon-cart.svg');
      width: 20px;
      height: 20px;
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
      vertical-align: middle;
      margin-right: 2%;
}

p {
      font-family: 'Montserrat', sans-serif;
      font-weight: 500;
      line-height: 1.5;
      font-size: 18px;
      margin: 2% 0;
}