/* Benefits row: icon, "(TITLE)", gold dash, short text; three columns, stacked on phones. */
@layer components {
  .benefits {
    padding: 3.5rem var(--noria-gutter) 1rem;
  }

  .benefits__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 15rem));
    justify-content: center;
    gap: 2rem clamp(2rem, 7vw, 7rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .benefits__item {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.875rem;
    text-align: center;
  }

  .benefits__icon {
    height: 3.25rem;
    width: auto;
    color: var(--noria-gold);
  }

  .benefits__icon--shipping { aspect-ratio: 49.88 / 57.57; }
  .benefits__icon--secure { aspect-ratio: 1; height: 3.125rem; }
  .benefits__icon--premium { aspect-ratio: 69.47 / 43.08; height: 2.625rem; margin-block: 0.3125rem; }

  .benefits__title {
    margin-top: 0.75rem;
    font-size: var(--noria-text-benefit);
    font-weight: 600;
    letter-spacing: 0.07em;
    white-space: nowrap;
  }

  .benefits__text {
    max-width: 13.5rem;
    margin: 0.25rem 0 0;
    font-size: var(--noria-text-small);
    line-height: 1.73;
  }

  @media (max-width: 47.99rem) {
    .benefits__list { grid-template-columns: minmax(0, 15rem); gap: 3.75rem; }
  }
}