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

.product-ingredients-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: var(--s6);
}

.product-ingredients-column {
  min-width: 0;
}

.product-ingredients-item {
  opacity: 0.3;
  transition: opacity 300ms ease-out;
}

@media (hover: hover) {
  .product-ingredients-item:hover {
    opacity: 0.6;
  }
}

.product-ingredients-item.state--active,
.product-ingredients-item:focus-visible {
  opacity: 1;
}

.product-ingredients-icon {
  width: 23px;
  height: 23px;
  object-fit: contain;
}

.product-ingredients-media,
.product-ingredients-art {
  min-height: 0;
}

.product-ingredients-media {
  width: 200px;
  aspect-ratio: 1;
}

.product-ingredients-art,
.product-ingredients-benefits {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.product-ingredients-art.state--active,
.product-ingredients-benefits.state--active {
  opacity: 1;
}

.product-ingredients-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-ingredients-benefits ul {
  padding: 0;
  list-style: none;
}

.product-ingredients-panels {
  width: 100%;
}

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

@media (min-width: 992px) {
  .product-ingredients-layout {
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    align-items: start;
    max-width: 1152px;
    margin-inline: auto;
    row-gap: 0;
  }

  .product-ingredients-icon {
    width: 32px;
    height: 32px;
  }

  .product-ingredients-media {
    align-self: center;
    width: 242px;
    aspect-ratio: 242 / 245;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-ingredients-item,
  .product-ingredients-art,
  .product-ingredients-benefits {
    transition: none;
  }
}