<section class="section offsetSection">
  <div class="container">
    <h3 class="h3 offsetSection__title">
      Sed sed porttitor ante. Vivamus auctor mi nec laoreet vestibulum. Cras accumsan tempus tincidunt, aenean scelerisque at purus non varius.
    </h3>
    <div class="offsetSection__columns">
      <div class="offsetSection__column">
        <p>
          Donec pharetra mauris feugiat mi malesuada, nec fringilla quam fermentum. Pellentesque in odio quis turpis porttitor aliquet. Vivamus commodo efficitur turpis. Aliquam
        </p>
      </div>
      <div class="offsetSection__column">
        <p>
          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="offsetSection__column">
        <p>
          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>
  </div>
</section>

@use '@/core' as *;

.offsetSection {
  display: flex;
  flex-direction: column;
  gap: 3rem;

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

  &__columns {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
    margin-top: 3rem;

    @include at(md) {
      grid-template-columns: repeat(3, 1fr);
    }

    @include at(lg) {
      grid-template-columns: repeat(4, 1fr);

      > .offsetSection__column:first-child {
        grid-column-start: 2;
      }
    }
  }
}