/*********************************/
/* START STYLING  FOR MOBILE DEVICES AND THEN SELECT A BREAKPOINT AT 704px(704/16=44em: IS WHERE DESIGN BREAKS) */
/*********************************/

body {
  font-family: "Montserrat", Arial, sans-serif;
  background-color: #f2ebe3;
  font-weight: 500;

  padding: calc((28 / 16) * 1rem) calc((16 / 16) * 1rem) 0
    calc((16 / 16) * 1rem);

  /* center recipe card and footer  */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc((20 / 16) * 1rem);
}

@media (min-width: 44em) {
  body {
    padding: calc((175 / 16) * 1rem);
  }
}

.flex-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 44em) {
  .flex-container {
    flex-direction: row;
  }
}

.product-container {
  min-width: calc((343 / 16) * 1rem);
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

@media (min-width: 44em) {
  .product-container {
    max-width: calc((600 / 16) * 1rem);
    max-height: calc((450 / 16) * 1rem);
  }
}

.row1 {
  grid-row: 1;
}

.row3 {
  grid-row: 3;
}

.row5 {
  grid-row: 5;
}

.row7 {
  grid-row: 7;
}

.row9 {
  grid-row: 9;
}

/* IMAGE---------------------------------------- */
.product-img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 44em) {
  .product-img {
    min-width: calc((300 / 16) * 1rem);
  }
}

/* INFO CONTAINER----------------------------  */
.info-container {
  padding: calc((24 / 16) * 1rem);
}

@media (min-width: 44em) {
  .info-container {
    padding: calc((32 / 16) * 1rem);
  }
}

.grid-info-container {
  display: grid;
  grid-template-rows:
    calc((15 / 16) * 1rem) calc((12 / 16) * 1rem) calc((64 / 16) * 1rem) calc(
      (16 / 16) * 1rem
    )
    calc((92 / 16) * 1rem) calc((24 / 16) * 1rem)
    calc((32 / 16) * 1rem) calc((20 / 16) * 1rem) calc((48 / 16) * 1rem);
}

@media (min-width: 44em) {
  .grid-info-container {
    display: grid;
    grid-template-rows:
      calc((15 / 16) * 1rem)
      calc((20 / 16) * 1rem)
      calc((96 / 16) * 1rem)
      calc((24 / 16) * 1rem)
      calc((92 / 16) * 1rem)
      calc((29 / 16) * 1rem)
      calc((32 / 16) * 1rem)
      calc((30 / 16) * 1rem)
      calc((48 / 16) * 1rem);
  }
}

.product-type {
  font-size: calc((12 / 16) * 1rem);
  letter-spacing: 5px;
  color: #6c7289;
  text-transform: uppercase;
}

.product-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: calc((32 / 16) * 1rem);
  font-weight: 700;
  line-height: 1;
  color: #1c232b;
  opacity: 0.91;
}

.product-description {
  font-size: calc((14 / 16) * 1rem);
  line-height: 1.6;
  color: #6c7289;
}

.product-prices {
  display: flex;
  align-items: center;
  gap: calc((20 / 16) * 1rem);
}

.product-price {
  font-family: "Fraunces", Georgia, serif;
  font-size: calc((32 / 16) * 1rem);
  font-weight: 700;
  line-height: 1;
  color: #3c8067;
}

.product-previous-price {
  font-size: calc((13 / 16) * 1rem);
  line-height: 1.8;
  color: #6c7289;
}

.add-to-card-btn {
  background-color: #3c8067;
  border-radius: 8px;
  opacity: 0.95;
  border: none;

  cursor: pointer;
  transition: all 0.3s ease;

  font-size: calc((14 / 16) * 1rem);
  font-weight: 700;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc((20 / 16) * 1rem);
}

.add-to-card-btn:hover,
.add-to-card-btn:focus {
  background-color: #1a4032;
  outline: none;
}

/* FOOTER--------------------------- */
.attribution {
  font-size: calc((11 / 16) * 1rem);
  text-align: center;
}
.attribution a {
  color: #3c8067;
}