@layer components {
  .searchspring-recommendations__products {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-unit-s);

    @media screen and (min-width: 768px), print {
      grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (min-width: 1024px), print {
      grid-template-columns: repeat(
        var(--searchspring-recommendations-columns),
        1fr
      );
    }

    .template-index &,
    .template-product &,
    .template-404 & {
      & > :last-child {
        @media screen and (min-width: 1024px), print {
          display: none;
        }
      }
    }
  }
}