:root {
  --section-x: 1.5rem;
  --touch-min: 2.75rem;
}

@media (max-width: 768px) {
  :root {
    --section-x: 1.15rem;
  }
}

@media (max-width: 380px) {
  :root {
    --section-x: 1rem;
  }
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.site-header {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.hero {
  height: calc(100svh - var(--header-height));
  min-height: clamp(16rem, 72svh, 100%);
}

@media (max-width: 768px) {
  .hero__image {
    object-position: center 38%;
  }
}

@media (max-width: 480px) {
  .hero {
    height: calc(100dvh - var(--header-height));
    min-height: calc(100dvh - var(--header-height));
  }
}

@media (hover: none) and (pointer: coarse) {
  .gallery__item:hover img {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .contact__input,
  .contact__select,
  .contact__textarea {
    font-size: 1rem;
    min-height: var(--touch-min);
  }

  .contact__textarea {
    min-height: 8.5rem;
  }

  .btn {
    min-height: var(--touch-min);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}