@media (max-width: 767px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-header__actions {
    width: 100%;
    justify-content: space-between;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + var(--spacing-xs));
    right: var(--spacing-md);
    left: var(--spacing-md);
    background: var(--color-card);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-soft);
    flex-direction: column;
    box-shadow: var(--shadow-soft);
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    z-index: 150;
  }

  .site-nav.site-nav--open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav__list a {
    width: 100%;
    padding: var(--spacing-xs) 0;
  }

  .hero__video-wrapper {
    padding-top: 50%;
  }

  .location-thumbs__button {
    width: 64px;
    height: 64px;
  }

  .image-modal__dialog {
    padding: var(--spacing-lg);
  }
}

@media (min-width: 640px) {
  .site-header {
    padding-left: var(--spacing-xxl);
    padding-right: var(--spacing-xxl);
  }

  .hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }

  .hero__visual {
    min-height: 230px;
  }

  .site-nav__list {
    gap: var(--spacing-md);
  }
}

@media (min-width: 1024px) {
  main {
    padding-left: 0;
    padding-right: 0;
    padding-top: var(--spacing-xxl);
  }

  .locations-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--spacing-xs) var(--spacing-md);
    align-items: center;
  }

  .locations-list li strong {
    grid-column: 1 / -1;
  }

  .locations-list li span {
    grid-column: 1;
  }

  .location-thumbs {
    grid-column: 2;
    grid-row: 2 / span 2;
    justify-self: end;
    align-self: center;
    margin-top: 0;
    display: inline-flex;
  }

  .location-thumbs--empty {
    min-width: calc((76px * 3) + (var(--spacing-xs) * 2));
    min-height: 76px;
    visibility: hidden;
    pointer-events: none;
  }

  .plans-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-grid {
    flex-direction: row;
  }

  .contact-info,
  .contact-form {
    flex: 1;
  }

  .section {
    padding: var(--spacing-xxl) var(--spacing-xl);
  }
}