@layer component {
  .block--views-block--e-learning-modules-available-modules {
    margin-block: var(--layout-component-block-space);

    & h2 {
      font: var(--font-head-l-light);
      letter-spacing: var(--letter-spacing-head-l-light);
      margin-block-end: 1.875rem;
    }

    & .views-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
      gap: 1.75rem;
    }
  }

  @media screen and (min-width: 48rem) {
    .block--views-block--e-learning-modules-available-modules {
      & h2 {
        font: var(--font-head-xl-light);
        letter-spacing: var(--letter-spacing-head-xl-light);
      }

      & .views-content {
        gap: 1.25rem 2rem;
      }
    }
  }
}