:root {
  --page-gutter: var(--spacing-4);
  --page-gutter-wide: var(--spacing-4);
  --section-space: var(--spacing-16);
  --section-space-large: var(--spacing-20);
  --header-nav-display: none;
  --header-toggle-display: inline-flex;
  --header-menu-position: absolute;
  --header-menu-top: calc(100% + var(--spacing-4));
  --header-menu-right: 0;
  --header-menu-width: min(22rem, calc(100vw - var(--page-gutter) * 2));
  --header-menu-padding: var(--spacing-6);
  --header-menu-surface: var(--colors-surface-lowest);
  --header-menu-shadow: var(--shadows-tectonic);
  --home-hero-columns: 1fr;
  --home-hero-gap: var(--spacing-10);
  --home-hero-media-height: var(--sizes-hero-media-height);
  --home-hero-slab-position: relative;
  --home-hero-slab-bottom: auto;
  --home-hero-slab-left: auto;
  --home-hero-slab-margin-top: calc(-1 * var(--spacing-14));
  --home-hero-slab-margin-left: var(--spacing-4);
  --home-hero-slab-width: calc(100% - var(--spacing-8));
  --home-hero-form-position: relative;
  --home-hero-form-top: auto;
  --home-hero-form-max: 100%;
  --review-track-columns: repeat(3, minmax(var(--sizes-review-card-min), 86%), 1fr);
  --service-track-column: min(86%, 22rem);
  --home-teaser-columns: 1fr;
  --services-intro-columns: 1fr;
  --services-mosaic-columns: 1fr;
  --service-kitchen-column: auto;
  --service-bathrooms-column: auto;
  --service-flooring-column: auto;
  --service-drywall-column: auto;
  --service-decks-column: auto;
  --service-painting-column: auto;
  --service-kitchen-height: 26rem;
  --service-bathrooms-height: 18rem;
  --service-flooring-height: 17rem;
  --service-drywall-height: 22rem;
  --service-decks-height: 18rem;
  --service-painting-height: 17rem;
  --contact-intro-columns: 1fr;
  --contact-main-columns: 1fr;
  --contact-form-columns: 1fr;
  --default-footer-columns: 1fr;
  --home-footer-columns: 1fr;
  --home-footer-utility-direction: column;
  --home-footer-utility-align: flex-start;
}

@media (min-width: 48rem) {
  :root {
    --page-gutter: var(--spacing-6);
    --page-gutter-wide: var(--spacing-6);
    --section-space: var(--spacing-18);
    --home-hero-media-height: 32rem;
    --service-track-column: calc((100% - var(--spacing-6)) / 2);
    --home-teaser-columns: repeat(3, minmax(0, 1fr));
    --contact-form-columns: repeat(2, minmax(0, 1fr));
    --default-footer-columns: repeat(3, minmax(0, auto));
    --home-footer-utility-direction: row;
    --home-footer-utility-align: center;
  }
}

@media (min-width: 72rem) {
  :root {
    --page-gutter: var(--spacing-8);
    --page-gutter-wide: var(--spacing-8);
    --section-space: var(--spacing-20);
    --section-space-large: var(--spacing-24);
    --header-nav-display: flex;
    --header-toggle-display: none;
    --header-menu-position: static;
    --header-menu-top: auto;
    --header-menu-right: auto;
    --header-menu-width: auto;
    --header-menu-padding: var(--spacing-0);
    --header-menu-surface: transparent;
    --header-menu-shadow: none;
    --home-hero-columns: minmax(0, 1.68fr) minmax(20rem, 0.9fr);
    --home-hero-gap: var(--spacing-12);
    --home-hero-media-height: 39rem;
    --home-hero-slab-position: absolute;
    --home-hero-slab-bottom: var(--spacing-0);
    --home-hero-slab-left: calc(-1 * var(--spacing-4));
    --home-hero-slab-margin-top: var(--spacing-0);
    --home-hero-slab-margin-left: var(--spacing-0);
    --home-hero-slab-width: min(35rem, calc(100% - var(--spacing-14)));
    --home-hero-form-position: sticky;
    --home-hero-form-top: calc(var(--sizes-header-height) + var(--spacing-8));
    --home-hero-form-max: 24rem;
    --review-track-columns: repeat(3, minmax(0, 1fr));
    --service-track-column: calc((100% - var(--spacing-6) * 2) / 3);
    --services-intro-columns: minmax(0, 1.72fr) minmax(0, 0.92fr);
    --services-mosaic-columns: repeat(12, minmax(0, 1fr));
    --service-kitchen-column: 1 / span 8;
    --service-bathrooms-column: 9 / span 4;
    --service-flooring-column: 1 / span 4;
    --service-drywall-column: 5 / span 8;
    --service-decks-column: 1 / span 6;
    --service-painting-column: 7 / span 6;
    --service-bathrooms-height: 26rem;
    --service-flooring-height: 22rem;
    --service-drywall-height: 22rem;
    --service-decks-height: 18rem;
    --service-painting-height: 18rem;
    --contact-intro-columns: minmax(0, 1fr) minmax(21rem, 0.92fr);
    --contact-main-columns: minmax(0, 1.2fr) minmax(18rem, 0.84fr);
    --home-footer-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }
}