.alt-featured { background: var(--alt-fc-bg); }

.alt-featured__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.alt-featured__header--center { align-items: center; text-align: center; }
.alt-featured__header--left { align-items: flex-start; text-align: left; }
.alt-featured__header--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
}

.alt-featured__heading { margin: 0; }
.alt-featured__sub { margin-top: 10px; max-width: 62ch; }
.alt-featured__cta { flex: 0 0 auto; }

.alt-featured__grid {
  display: grid;
  grid-template-columns: repeat(var(--alt-fc-cols-d), minmax(0, 1fr));
  column-gap: var(--alt-fc-gap);
  row-gap: var(--alt-fc-gap-row, var(--alt-fc-gap));
}

.alt-featured__empty { text-align: center; }

@media (max-width: 1279px) {
  .alt-featured__grid { grid-template-columns: repeat(var(--alt-fc-cols-t), minmax(0, 1fr)); }
  .alt-featured__header { margin-bottom: 30px; }
}

@media (max-width: 767px) {
  .alt-featured__grid { grid-template-columns: repeat(var(--alt-fc-cols-m), minmax(0, 1fr)); }
  .alt-featured__header { margin-bottom: 24px; }
  .alt-featured__header--split { flex-direction: column; align-items: flex-start; }

  /* Sideways scroll keeps the cards at a readable size on a phone instead of
     squeezing the whole row into 375px. */
  .alt-featured__grid--scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--alt-gutter) * -1);
    padding-inline: var(--alt-gutter);
    scrollbar-width: none;
  }
  .alt-featured__grid--scroll::-webkit-scrollbar { display: none; }
  .alt-featured__grid--scroll > * {
    flex: 0 0 calc((100% - var(--alt-fc-gap)) / 1.6);
    scroll-snap-align: start;
  }
}

/* The reference puts the section's button under the products, centred. */
.alt-featured__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 60px;
}

@media (max-width: 1279px) {
  .alt-featured__actions { margin-top: 40px; }
}

@media (max-width: 767px) {
  .alt-featured__actions { margin-top: 30px; }
}