/* Task 1300: fit the complete desktop 2x2 square-card grid in the viewport. */
@media (min-width: 721px) {
  .product-index-page .product-category-grid {
    --product-category-square-size: min(470px, calc((100vh - 176px) / 2), calc((100vw - 52px) / 2));
    grid-template-columns: repeat(2, var(--product-category-square-size)) !important;
    grid-auto-rows: var(--product-category-square-size) !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
    gap: 16px !important;
  }

  .product-index-page .product-category-card,
  .product-index-page .product-category-card.card,
  .product-index-page .product-category-card:hover,
  .product-index-page .product-category-card:focus,
  .product-index-page .product-category-card:focus-visible,
  .product-index-page .product-category-card:focus-within {
    width: var(--product-category-square-size) !important;
    height: var(--product-category-square-size) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    gap: clamp(6px, 1vh, 12px) !important;
    padding: clamp(8px, 1.8vh, 16px) !important;
    box-sizing: border-box !important;
    transform: none !important;
  }

  .product-index-page .product-category-card h2,
  .product-index-page .product-category-card:hover h2,
  .product-index-page .product-category-card:focus h2,
  .product-index-page .product-category-card:focus-visible h2,
  .product-index-page .product-category-card:focus-within h2 {
    min-height: clamp(1.8rem, 4vh, 2.6rem) !important;
    font-size: clamp(.9rem, 1.35vw, 1.35rem) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .product-index-page .product-category-image-frame,
  .product-index-page .product-category-card:hover .product-category-image-frame,
  .product-index-page .product-category-card:focus .product-category-image-frame,
  .product-index-page .product-category-card:focus-visible .product-category-image-frame,
  .product-index-page .product-category-card:focus-within .product-category-image-frame {
    width: min(80%, 350px) !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
}

@supports (height: 100dvh) {
  @media (min-width: 721px) {
    .product-index-page .product-category-grid {
      --product-category-square-size: min(470px, calc((100dvh - 176px) / 2), calc((100vw - 52px) / 2));
    }
  }
}