.about-section {
  position: relative;
  isolation: isolate;
}

.about-section::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: min(3200px, 100%);
  background-image: var(--about-section-gradient, none);
  background-repeat: no-repeat;
  background-position: top center;
  content: "";
  pointer-events: none;
}

.product-lines,
.product-line-block {
  padding-block: var(--block-space-top, 0px) var(--block-space-bottom, 0px);
}

.product-line {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.product-line-media {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 176 / 139;
}

.product-line-image,
.product-line-image img {
  width: 100%;
  height: 100%;
}

.product-line-image img {
  object-fit: cover;
}

.product-line-button {
  position: absolute;
  bottom: var(--s1);
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

.product-line-card {
  --glass-rim: 1px;
  --glass-converge: 10px;
  --glass-depth: 20px;
  --glass-lit: 255, 255, 255;
  --glass-shade: 31, 57, 95;
  --glass-bleed: calc(var(--glass-depth) * -2);

  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100%;
  padding: var(--s2);
  background-color: rgba(var(--glass-lit), 0.45);
  box-shadow:
    inset 0 0 0 var(--glass-rim) rgba(var(--glass-lit), 0.7),
    inset calc(var(--glass-converge) * -1) calc(var(--glass-converge) * -1)
      calc(var(--glass-converge) * 1.4) calc(var(--glass-converge) * -0.8) rgba(var(--glass-lit), 0.36),
    inset calc(var(--glass-depth) * -1) calc(var(--glass-depth) * -1) calc(var(--glass-depth) * 1.2)
      calc(var(--glass-depth) * -0.95) rgba(var(--glass-lit), 0.24),
    inset var(--glass-depth) var(--glass-depth) calc(var(--glass-depth) * 1.5)
      calc(var(--glass-depth) * -0.95) rgba(var(--glass-shade), 0.11);
  -webkit-backdrop-filter: blur(96px);
  backdrop-filter: blur(96px);
}

.product-line-card::before,
.product-line-card::after {
  position: absolute;
  background-repeat: no-repeat;
  filter: blur(24px);
  mix-blend-mode: multiply;
  opacity: 0.2;
  content: "";
  pointer-events: none;
}

.product-line-card::before {
  inset: var(--glass-bleed) var(--glass-bleed) auto;
  height: 150px;
  background-image: var(--product-line-bleed, none);
  background-size: 100% auto;
  background-position: center bottom;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

.product-line-card::after {
  display: none;
}

.product-line-ingredients {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s-4);
}

.product-line-ingredient-icon {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .product-lines,
  .product-line-block {
    padding-block: var(--block-space-top-mobile, 0px) var(--block-space-bottom-mobile, 0px);
  }

  .product-line-card {
    min-height: 464px;
  }
}

@media (min-width: 768px) {
  .product-line-media {
    aspect-ratio: 873 / 641;
  }

  .product-line-card {
    gap: var(--s3);
    padding: var(--s3);
  }

  .product-line-ingredients {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--s2);
  }
}

@media (min-width: 1024px) {
  .product-line--left {
    grid-template-columns: 873fr 427fr;
  }

  .product-line--right {
    grid-template-columns: 427fr 873fr;
  }

  .product-line--right .product-line-media {
    order: 2;
  }

  .product-line-button {
    bottom: var(--s3);
  }

  .product-line-ingredients {
    grid-template-columns: repeat(2, minmax(0, 150px));
    grid-auto-flow: row;
    gap: var(--s2) 47px;
  }

  .product-line-card::before {
    inset: var(--glass-bleed);
    height: auto;
    background-size: auto 100%;
  }

  .product-line--left .product-line-card::before {
    background-position: right center;
    -webkit-mask-image: linear-gradient(to right, #000, transparent 110px);
    mask-image: linear-gradient(to right, #000, transparent 110px);
  }

  .product-line--right .product-line-card::before {
    background-position: left center;
    -webkit-mask-image: linear-gradient(to left, #000, transparent 110px);
    mask-image: linear-gradient(to left, #000, transparent 110px);
  }

  .product-line-card::after {
    display: block;
    inset: var(--glass-bleed) var(--glass-bleed) auto;
    height: 150px;
    background-size: 100% auto;
    background-position: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
  }

  .product-line--left .product-line-card::after {
    background-image: var(--product-line-above-right, none);
  }

  .product-line--right .product-line-card::after {
    background-image: var(--product-line-above-left, none);
  }
}