/* Match each part of the homepage product cards across the same visual row. */
.value-home .value-feature-grid > .value-feature .value-feature-copy > h3,
.value-home .value-feature-grid > .value-feature .value-feature-copy > ul {
  min-height: 0;
}

@supports (grid-template-rows: subgrid) {
  /* Below this breakpoint the feature grid already has one card per row. */
  @media (min-width: 901px) {
    .value-home .value-feature-grid {
      row-gap: 0;
    }

    .value-home .value-feature-grid > .value-feature {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: span 9;
      row-gap: 0;
      min-width: 0;
    }

    .value-home .value-feature-grid > .value-feature > img {
      grid-row: 1;
      min-width: 0;
    }

    .value-home .value-feature-grid > .value-feature > .value-feature-copy {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 2 / span 8;
      row-gap: 0;
      min-width: 0;
    }

    .value-home .value-feature-grid .value-feature-copy > h3 {
      grid-row: 1;
      align-self: start;
    }

    .value-home .value-feature-grid .value-feature-copy > .product-label {
      grid-row: 2;
      align-self: start;
      justify-self: stretch;
    }

    .value-home .value-feature-grid .value-feature-copy > p:not([class]) {
      grid-row: 3;
      align-self: start;
    }

    .value-home .value-feature-grid .value-feature-copy > ul {
      grid-row: 4;
      align-self: start;
    }

    .value-home .value-feature-grid .value-feature-copy > .value-feature-price {
      grid-row: 5;
      align-self: stretch;
      align-content: end;
      margin-top: 0;
    }

    .value-home .value-feature-grid .value-feature-copy > .value-feature-delivery {
      grid-row: 6;
      align-self: start;
    }

    .value-home .value-feature-grid .value-feature-copy > [data-product-purchase] {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 7 / span 2;
      row-gap: 0;
      min-width: 0;
    }

    .value-home .value-feature-grid [data-product-purchase] > .product-purchase {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: 1 / span 2;
      row-gap: 0;
      min-width: 0;
      margin-top: 0;
    }

    .value-home .value-feature-grid .product-purchase > .product-actions {
      grid-row: 1;
      align-self: start;
    }

    .value-home .value-feature-grid .product-purchase > .product-payment-preview {
      grid-row: 2;
      align-self: start;
    }
  }
}