.page {
  min-height: 100vh;
}

.site-main {
  display: block;
}

.container {
  width: min(100% - (var(--container-padding) * 2), var(--container-max));
  margin-inline: auto;
}

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

.site-header,
.site-footer,
.hero,
.hero-features,
.about,
.portfolio,
.process,
.pricing,
.support-plans,
.clients,
.reviews,
.contact {
  position: relative;
}

.site-header__inner,
.site-footer__inner,
.contact__inner,
.about__inner {
  display: grid;
  gap: var(--space-5);
}

.feature-list,
.portfolio-grid,
.process-grid,
.pricing-grid,
.support-grid,
.clients-grid,
.reviews-grid,
.about__advantages {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  :root {
    --container-padding: 1.5rem;
    --section-space: 4rem;
  }
}

@media (min-width: 62rem) {
  :root {
    --section-space: 5rem;
  }
}