.code {
  padding: var(--Spacing-x2);
  background: var(--Base-Surface-Secondary-light-Normal);
}

/*
  Mock styles for the carousel cards. Will be removed/replaced
  when the carousel functionality is implemented (SW-1542). 
*/
.cardsContainer {
  display: grid;
  gap: var(--Spacing-x3);
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.cardsContainer > * {
  scroll-snap-align: start;
}

/* Show 2 cards on tablet */
@media (min-width: 768px) {
  .cardsContainer {
    grid-auto-columns: calc((100% - var(--Spacing-x3)) / 2);
  }
}

/* Show 3 cards on desktop */
@media (min-width: 1024px) {
  .cardsContainer {
    grid-auto-columns: calc((100% - var(--Spacing-x3) * 2) / 3);
  }
}