@layer layout {
  .container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-6);
  }

  .section {
    padding-block: var(--space-8);
  }

  .section + .section {
    border-top: 1px solid var(--color-line);
  }

  .stack > * + * {
    margin-block-start: var(--space-4);
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }

  @media (max-width: 1199px) {
    .container {
      padding-inline: var(--space-5);
    }

    .grid-3 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 899px) {
    .section {
      padding-block: var(--space-7);
    }
  }

  @media (max-width: 599px) {
    .container {
      padding-inline: var(--space-4);
    }

    .section {
      padding-block: var(--space-6);
    }

    .grid-3 {
      grid-template-columns: 1fr;
    }
  }
}