<section class="section detailsSection">
  <div class="container">
    <header class="detailsSection__header">
      <h2 class="h2 detailsSection__title">
        Centered headline and four detail columns
      </h2>
      <p class="detailsSection__intro">
        Praesent dictum sit amet quam efficitur placerat natoque
      </p>
    </header>
    <div class="grid detailsSection__grid">
      <div class="cell detailsSection__item">
        <h3 class="detailsSection__itemTitle">1. Lorem Ipsum</h3>
        <p class="detailsSection__itemText">
          Donec pharetra mauris feugiat mi malesuada, nec fringilla quam fermentum. Pellentesque in odio quis turpis porttitor aliquet. Vivamus commodo efficitur turpis.
        </p>
      </div>
      <div class="cell detailsSection__item">
        <h3 class="detailsSection__itemTitle">2. Lorem ipsum dolor sit, amet consectetur adipisicing elit</h3>
        <p class="detailsSection__itemText">
          Pellentesque in odio quis turpis porttitor aliquet. Vivamus commodo efficitur turpis. Aliquam pharetra tellus in turpis commodo, non dapibus urna ultrices. Cras commodo vulputate.
        </p>
      </div>
      <div class="cell detailsSection__item">
        <h3 class="detailsSection__itemTitle">3. Portitor Turpius Adisciput</h3>
        <p class="detailsSection__itemText">
          Aliquam pharetra tellus in turpis commodo, non dapibus urna ultrices. Cras commodo vulputate ipsum sed iaculis. Etiam ac tristique arcu, eget vestibulum metus. Aenean feugiat.
        </p>
      </div>
      <div class="cell detailsSection__item">
        <h3 class="detailsSection__itemTitle">4. Malesuada Mauris</h3>
        <p class="detailsSection__itemText">
          Nam ullamcorper lobortis libero et laoreet. Duis nec varius ex, in convallis ante. Donec mollis sollicitudin ligula quis placerat. Vestibulum luctus lacus in justo.
        </p>
      </div>
    </div>
  </div>
</section>

@use '@/core' as *;

.detailsSection {
  display: flex;
  flex-direction: column;
  gap: 4rem;

  &__header {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  &__title {
    font-size: var(--root-font-size-h1);
    margin: 0;
    max-width: var(--root-prose-wide-max);
  }

  &__intro {
    color: var(--color-gray-600);
    font-size: var(--root-font-size-lg);
    line-height: 1.5;
    margin: 0;
    max-width: 42.375rem; // ~678px — centered intro under wide titles
  }

  &__grid {
    --gap: 1rem;

    margin-top: 3rem;

    @include at(md) {
      --columns: 2;

      grid-template-rows: repeat(4, auto);
    }

    @include at(lg) {
      --columns: 4;

      grid-template-rows: auto auto;
    }
  }

  &__item {
    display: grid;
    gap: 1rem;
    min-width: 0;

    @include at(md) {
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
  }

  &__itemTitle {
    color: var(--accent-color);
    font-size: var(--root-font-size);
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
  }

  &__itemText {
    color: var(--accent-color-text);
    margin: 0;
  }
}