@layer components {
  /* ==========================================================================
     Products Page
     ========================================================================== */
  .products-page-hero {
    text-align: center;
    padding-block: var(--spacing-3xl) var(--spacing-md);
  }

  .products-page-hero .section-heading {
    font-size: clamp(2rem, 4vw, var(--font-size-4xl));
  }

  /* 2x2 grid for the dedicated products page */
  .products-grid--four {
    max-width: 60rem;
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 48rem) {
    .products-grid--four {
      grid-template-columns: 1fr;
    }
  }

  /* Card with CTA button */
  .product-card--linked .product-card-body {
    display: flex;
    flex-direction: column;
  }

  .product-card--linked .product-card-body p {
    flex: 1;
    margin-block-end: var(--spacing-md);
  }

  /* Outline button for product cards */
  .btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    align-self: flex-start;

    &:hover {
      background: var(--color-primary);
      color: var(--color-bg);
    }
  }
}