@supports (-webkit-background-clip: text) or (background-clip: text) {
  .heading-secondary {
    background-image: linear-gradient(
      to right,
      var(--primary-color-dark),
      var(--text-color)
    );
    -webkit-background-clip: text;
    color: transparent;
  }

  .user-name {
    background-image: linear-gradient(
      to right,
      var(--primary-color),
      var(--primary-color-dark)
    );
    -webkit-background-clip: text;
    color: transparent;
  }
}

/* 900px == 56.25em */
@media screen and (max-width: 56.25em) {
  html {
    font-size: 50%;
  }

  .cart-summary {
    max-width: 50%;
  }
}

/* 750px == 46.875em */
@media screen and (max-width: 46.875em) {
  .products {
    flex-direction: column;
  }
  .product {
    gap: 2.4rem;
  }
}

/* 510.4px == 28em */
@media screen and (max-width: 31.9em) {
  .header {
    flex-wrap: wrap;
    row-gap: 2.4rem;
  }

  .main-nav {
    width: 100%;
  }

  .user,
  .logo {
    order: -1;
  }

  .product,
  .cart-item__body {
    flex-direction: column;
    gap: 3.2rem;
  }

  .cart-summary {
    max-width: 100%;
  }

  .order-item__body {
    flex-direction: column;
    align-items: start;
    gap: 2rem;
  }
}