:root {
  --pl-card-ratio: 1 / 1.18;
  --pl-card-ratio-m: 1 / 1.12;
  --pl-card-h: auto;
  --pl-card-h-m: auto;
  --pl-card-fit: cover;
}

.product-visual,
.product .product-visual,
.pgrid .product .product-visual,
.sf-rail .product .product-visual,
.sf-sec .product .product-visual,
.wg .product .product-visual,
.wg-prail-cell .product .product-visual,
.wg-paged-cell .product .product-visual,
.wg-show .product .product-visual,
.qv-rel .product .product-visual {
  height: var(--pl-card-h, auto);
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--pl-card-ratio, 1 / 1.18);
  flex: 0 0 auto;
  overflow: hidden;
}

.product-visual > img,
.product .product-visual > img {
  width: 100%;
  height: 100%;
  object-fit: var(--pl-card-fit, cover);
}

.qv-main {
  height: var(--pl-card-h, auto);
  aspect-ratio: var(--pl-card-ratio, 1 / 1.18);
}

@media (max-width: 700px) {
  .product-visual,
  .product .product-visual,
  .pgrid .product .product-visual,
  .sf-rail .product .product-visual,
  .sf-sec .product .product-visual,
  .wg .product .product-visual,
  .wg-prail-cell .product .product-visual,
  .wg-paged-cell .product .product-visual,
  .wg-show .product .product-visual,
  .qv-rel .product .product-visual {
    height: var(--pl-card-h-m, auto);
    aspect-ratio: var(--pl-card-ratio-m, 1 / 1.12);
  }
  .qv-main {
    height: var(--pl-card-h-m, auto);
    aspect-ratio: var(--pl-card-ratio-m, 1 / 1.12);
  }
}

@supports not (aspect-ratio: 1 / 1) {
  .product-visual, .product .product-visual { min-height: 210px }
  @media (max-width: 700px) {
    .product-visual, .product .product-visual { min-height: 150px }
  }
}