.catalog {
  min-height:1024px;
  padding:80px 0;
  background:#1c1a17;
  color:var(--paper)
}
.catalog__grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,390px));
  justify-content:space-between;
  gap:32px;
  margin-top:80px
}
.product {
  --flavor:#8f1d18;
  position:relative;
  height:624px;
  border-radius:48px;
  background:linear-gradient(var(--ink),var(--flavor) 25%,var(--flavor) 50%,var(--ink));
  transition:filter .5s ease,opacity .5s ease,transform .5s var(--ease);
  isolation:isolate
}
.product--cherry {
  --flavor:#d12a3a
}
.product--currant {
  --flavor:#4f2a63
}
.product h3 {
  font-size:36px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  padding-top:36px
}
.product__line {
  position:absolute;
  top:77px;
  left:50%;
  transform:translateX(-50%)
}
.product__more {
  position:absolute;
  right:24px;
  top:101px;
  display:flex;
  align-items:center;
  gap:11px;
  text-transform:uppercase;
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  border:0;
  background:transparent;
  color:var(--paper);
  padding:5px 0;
  z-index:3
}
.product__more picture {
  display:block
}
.product__more img {
  width:24px;
  height:24px
}
.product__more:hover img {
  transform:translateX(4px);
  transition:transform .25s
}
.product__bottle {
  position:absolute;
  left:24px;
  top:101px;
  width:163px;
  height:421px;
  display:block;
  transition:transform .7s var(--ease)
}
.product__bottle img {
  width:100%;
  height:100%;
  object-fit:contain
}
.product--currant .product__bottle {
  width:156px
}
.product__fruit {
  position:absolute;
  left:72px;
  top:288px;
  width:294px;
  height:245px;
  display:block;
  pointer-events:none;
  transition:transform .7s var(--ease)
}
.product__fruit img {
  width:100%;
  height:100%;
  object-fit:cover
}
.product--cherry .product__fruit {
  top:301px;
  height:221px
}
.product--currant .product__fruit {
  top:312px
}
.product__nutrition {
  position:absolute;
  left:24px;
  right:24px;
  bottom:39px;
  display:flex;
  justify-content:space-between;
  gap:8px
}
.product__nutrition>div {
  display:flex;
  gap:5px;
  align-items:baseline
}
.product__nutrition dt {
  color:var(--muted);
  font-size:18px;
  font-weight:800
}
.product__nutrition dd {
  font-size:24px;
  font-weight:500
}
.product__volume {
  position:absolute;
  bottom:9px;
  left:0;
  right:0;
  text-align:center;
  font-size:16px;
  font-weight:300
}
.catalog__grid.has-hover .product:not(.is-hovered) {
  filter:brightness(.4);
  opacity:.8
}
.product.is-hovered {
  transform:translateY(-5px)
}
.product.is-hovered .product__bottle {
  transform:translateY(-8px) rotate(-2deg)
}
.product.is-hovered .product__fruit {
  transform:translate(3px,-3px)
}
@media(max-width:1250px) and (min-width:768px) {
  .catalog__grid {
    gap:20px
  }
  .product {
    height:570px;
    border-radius:32px
  }
  .product h3 {
    font-size:28px
  }
  .product__bottle {
    left:12px;
    width:140px;
    height:365px
  }
  .product--currant .product__bottle {
    width:135px
  }
  .product__fruit {
    left:auto;
    right:4px;
    width:80%;
    height:210px;
    top:280px
  }
  .product--cherry .product__fruit {
    top:290px;
    height:190px
  }
  .product--currant .product__fruit {
    top:300px
  }
  .product__more {
    font-size:15px;
    right:14px;
    gap:5px
  }
  .product__nutrition {
    left:14px;
    right:14px;
    gap:4px
  }
  .product__nutrition dt {
    font-size:12px
  }
  .product__nutrition dd {
    font-size:18px
  }
}
@media(max-width:767px) {
  .catalog {
    min-height:728px;
    padding:20px 0 0
  }
  .catalog>.container {
    width:100%;
    max-width:none
  }
  .catalog .eyebrow {
    padding:0 20px
  }
  .catalog__grid {
    display:flex;
    flex-direction:column;
    gap:24px;
    margin-top:40px
  }
  .product {
    height:200px;
    width:100%;
    border-radius:0;
    overflow:clip;
    background:linear-gradient(transparent,color-mix(in srgb,var(--flavor) 40%,transparent));
    background-color:#1c1a17
  }
  .product h3 {
    text-align:left;
    padding:12px;
    font-size:32px;
    line-height:1.25;
    font-weight:600;
    color:var(--flavor)
  }
  .product__line {
    left:12px;
    top:72px;
    transform:none
  }
  .product__line img {
    width:215px;
    height:1px
  }
  .product__more {
    left:12px;
    right:auto;
    top:94px;
    gap:16px;
    font-size:20px
  }
  .product__more img {
    width:16px;
    height:16px
  }
  .product__bottle,.product--currant .product__bottle {
    left:auto;
    right:0;
    top:auto;
    bottom:13px;
    width:59px;
    height:152px
  }
  .product__fruit,.product--cherry .product__fruit,.product--currant .product__fruit {
    left:auto;
    right:-27px;
    top:54px;
    width:246px;
    height:205px
  }
  .product__nutrition,.product__volume {
    display:none
  }
  .catalog__grid.has-hover .product:not(.is-hovered) {
    filter:none;
    opacity:1
  }
  .product.is-hovered {
    transform:none
  }
}
.product {
  cursor:pointer
}