@media (max-width: 374px) {
  h1, .h1 {
    font-size: 1.75rem;
  }

  .btn {
    padding: 12px 24px;
    font-size: 0.875rem;
  }

  .btn--lg {
    padding: 14px 28px;
  }
}

@media (min-width: 640px) {
  :root {
    --container-padding: 1.5rem;
  }

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

  .hide-sm { display: none; }
  .show-sm { display: block; }
}

@media (min-width: 768px) {
  .grid--2-md { grid-template-columns: repeat(2, 1fr); }
  .grid--3-md { grid-template-columns: repeat(3, 1fr); }
  .grid--4-md { grid-template-columns: repeat(4, 1fr); }

  .hide-md { display: none; }
  .show-md { display: block; }

  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 2rem;
  }

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

  .hide-lg { display: none; }
  .show-lg { display: block; }

  .flex-lg { display: flex; }
}

@media (min-width: 1280px) {
  .grid--3-xl { grid-template-columns: repeat(3, 1fr); }
  .grid--4-xl { grid-template-columns: repeat(4, 1fr); }
  .grid--5-xl { grid-template-columns: repeat(5, 1fr); }

  .hide-xl { display: none; }
  .show-xl { display: block; }
}

@media (min-width: 1536px) {
  :root {
    --container-padding: 2.5rem;
  }

  .hide-2xl { display: none; }
  .show-2xl { display: block; }
}

@media (max-width: 1023px) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .mobile-only {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .tablet-hide {
    display: none !important;
  }
}