/* PRODUCT CARDS */

.product-catalog{
  max-width:1362px;
  margin:0 auto;
  padding:0 0 115px;
}

.product-catalog__head{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:80px;
  align-items:end;
  padding:100px 0 55px;
  border-top:1px solid var(--ink);
}

.product-catalog__head h2{
  margin:20px 0 0;
  font-family:var(--display);
  font-size:clamp(55px,5.5vw,78px);
  line-height:.88;
  letter-spacing:-.07em;
}

.product-catalog__head h2 em{
  color:var(--teal);
  font-style:normal;
}

.product-catalog__head p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
  max-width:340px;
}

.product-catalog__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--ink);
  border-left:1px solid var(--line);
}

.product-card{
  position:relative;
  display:block;
  min-height:420px;
  color:var(--ink);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  text-decoration:none;
  transition:background .2s ease;
}

.product-card:hover{
  background:#F0F8F6;
}

.product-card--large{
  grid-row:span 2;
  min-height:840px;
}

.product-card__top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  padding:22px 24px;
  color:var(--muted);
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
}

.product-card__top span:first-child{
  color:var(--teal);
}

.product-card__visual{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.product-card__visual--grape{
  background:#E5F6F2;
}

.product-card__visual--chocolate{
  background:#EDE6DE;
}

.product-card__visual--onion{
  background:#E8F1E7;
}

.product-card__visual--milk{
  background:#EEF0EC;
}

.product-card__visual--apple{
  background:#E7F4EF;
}

.product-card__word{
  position:absolute;
  left:24px;
  bottom:88px;
  font-family:var(--display);
  font-size:clamp(48px,5vw,78px);
  line-height:.82;
  letter-spacing:-.075em;
  color:var(--teal);
}

.product-card--large .product-card__word{
  font-size:clamp(70px,7vw,110px);
}

.product-card__status{
  position:absolute;
  right:24px;
  bottom:82px;
  padding:10px 12px;
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
}

.product-card__status--danger{
  background:var(--teal);
  color:#fff;
}

.product-card__status--caution{
  background:#D8E7DE;
  color:var(--teal);
}

.product-card__status--safe{
  background:var(--mint);
  color:var(--teal);
}

.product-card__bottom{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  min-height:67px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  background:rgba(250,252,251,.94);
  border-top:1px solid var(--line);
}

.product-card__bottom h3{
  margin:0;
  font-family:var(--display);
  font-size:24px;
  line-height:1;
  letter-spacing:-.045em;
}

.product-card__bottom p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:9px;
}

.product-card__arrow{
  color:var(--teal);
  font-size:20px;
}

.product-card--text{
  padding:0;
  background:var(--teal);
  color:#fff;
}

.product-card--text:hover{
  background:#125853;
}

.product-card--text .product-card__top{
  color:#BBDDD7;
}

.product-card--text .product-card__top span:first-child{
  color:var(--mint);
}

.product-card__text{
  position:absolute;
  left:24px;
  bottom:50px;
  max-width:330px;
}

.product-card__text>span{
  display:block;
  margin-bottom:30px;
  color:var(--mint);
  font-family:var(--display);
  font-size:55px;
  line-height:.7;
}

.product-card__text h3{
  margin:0 0 15px;
  font-family:var(--display);
  font-size:48px;
  line-height:.87;
  letter-spacing:-.065em;
}

.product-card__text p{
  max-width:270px;
  margin:0;
  color:#CBE0DC;
  font-size:11px;
  line-height:1.5;
}

.product-card--text>.product-card__arrow{
  position:absolute;
  right:24px;
  bottom:26px;
  color:var(--mint);
}

@media(max-width:900px){
  .product-catalog{
    margin-left:20px;
    margin-right:20px;
  }

  .product-catalog__head{
    grid-template-columns:1fr;
    gap:30px;
  }

  .product-catalog__grid{
    grid-template-columns:1fr 1fr;
  }

  .product-card--large{
    grid-row:span 1;
    min-height:500px;
    grid-column:1 / -1;
  }
}

@media(max-width:650px){
  .product-catalog{
    padding-bottom:75px;
  }

  .product-catalog__head{
    padding:70px 0 40px;
  }

  .product-catalog__head h2{
    font-size:52px;
  }

  .product-catalog__grid{
    grid-template-columns:1fr;
  }

  .product-card,
  .product-card--large{
    min-height:360px;
  }

  .product-card--large{
    grid-column:auto;
  }

  .product-card__word,
  .product-card--large .product-card__word{
    font-size:62px;
  }

  .product-card__status{
    bottom:78px;
  }
}