@media (min-width: 2560px) {
  :root {
    --tiller-font-size-base: 1.125rem;
    --tiller-font-size-lg: 1.375rem;
    --tiller-font-size-xl: 1.75rem;
    --tiller-spacing-sm: 0.75rem;
    --tiller-spacing-md: 1.5rem;
    --tiller-spacing-lg: 2.5rem;
    --tiller-spacing-xl: 5rem;
    --tiller-container-max-width: min(80%, 1400px);
  }

  .container,
  .guide-article,
  .ts-main-content > section {
    max-width: min(80vw, 1400px);
  }

  h1,
  .heading-1 {
    font-size: clamp(2.5rem, 4vw, 5rem);
  }

  h2,
  .heading-2 {
    font-size: clamp(2rem, 3.5vw, 4rem);
  }

  h3,
  .heading-3 {
    font-size: clamp(1.75rem, 3vw, 3.25rem);
  }

  .btn,
  .ts-cta-button {
    font-size: 1.25rem;
    padding: 1rem 2.5rem;
    min-height: 56px;
  }

  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

@media (min-width: 3840px) {
  :root {
    --tiller-font-size-base: 1.25rem;
    --tiller-container-max-width: min(70%, 1600px);
  }

  .container,
  .guide-article {
    max-width: min(70vw, 1600px);
  }

  .cards--3col,
  .cards--4col,
  .ts-plans__grid {
    gap: 3rem;
  }
}

@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
  }

  *,
  *::before,
  *::after {
    backface-visibility: hidden;
  }

  .card--post,
  .ts-card,
  .btn {
    box-shadow:
      0 1px 2px rgb(0 0 0 / 8%),
      0 2px 4px rgb(0 0 0 / 6%),
      0 4px 8px rgb(0 0 0 / 4%);
  }
}

@media (min-width: 1920px) {
  :root {
    --tiller-font-size-base: 1.0625rem;
  }

  .ts-hero,
  .ts-portfolio,
  .ts-gallery {
    max-width: min(95vw, 2200px);
  }

  .mobile-nav-link,
  .ts-footer a {
    font-size: 1.125rem;
    padding: 0.75rem 1rem;
  }
}

@media (min-width: 2560px) {
  html,
  body {
    overflow-x: clip;
    max-width: 100vw;
  }

  section,
  .container,
  .ts-hero,
  .ts-footer {
    max-width: 100vw;
    overflow-x: clip;
  }
}

@media (min-width: 2560px) and (pointer: coarse) {
  a,
  button,
  .btn,
  input,
  textarea,
  select {
    min-height: 56px;
    min-width: 56px;
    font-size: 1.25rem;
  }

  input[type='text'],
  input[type='email'],
  input[type='tel'],
  textarea {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
  }
}