@charset 'utf-8';

/* Обёртка html добавлена временно чтобы удобнее было сворачивать стили */
html {
  .base-layout {
    --gap: clamp(0.5rem, 0.4987rem + 2.0844vw, 3rem);
    --full: minmax(var(--gap), 1fr);
    --content: min(1080px, 100% - var(--gap) * 2);
    --breakout: minmax(0, 2rem);
    --feature: minmax(0, 5rem);

    width: 100%;
    display: grid;
    place-content: center;
    grid-template-columns:
      [full-width-start] var(--full)
      [feature-start] var(--feature)
      [breakout-start] var(--breakout)
      [content-start] var(--content) [content-end]
      var(--breakout) [breakout-end]
      var(--feature) [feature-end]
      var(--full) [full-width-end];
  }

  .base-layout > :not(.breakout, .feature, .full-width),
  .full-width > :not(.breakout, .full-width) {
    grid-column: content;
  }

  .base-layout > .breakout {
    grid-column: breakout;
  }

  .base-layout > .feature {
    grid-column: feature;
  }

  .base-layout > .full-width {
    grid-column: full-width;

    display: grid;
    grid-template-columns: inherit;
  }
}

:root {
  --page-width: 1200px;
  --page-margin: 12px;
  --page-width-with-margin: calc(var(--page-width) + 2 * (var(--page-margin)));

  @media screen and (width >= 760px) {
    --page-margin: 24px;
  }
}

.wrapper {
  width: 100%;
  max-width: var(--page-width-with-margin);
  margin-inline: auto;

  & > * {
    margin-inline: var(--page-margin);
  }
}