@media (max-width: 768px) {
  /* --nadpis - logo - navigace */
  header {
    position: relative;
  }

  .hamburger-menu {
    position: absolute;
    right: 25px;
    display: block;
    z-index: 1;
  }

  .close {
    position: absolute;
    right: 25px;
    z-index: 2;
  }

  /* mobilní menu – výchozí stav (schované mimo obrazovku) */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    height: 100vh;
    background-color: white;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 0;
    display: block; /* musí být block, aby šla animace */
  }

  .nav-open {
    transform: translateX(0);
  }

  .top-bar_contacts {
    display: none;
  }

  /* -- mobilní verze obsahu -- */

  .intro_content {
    width: 70%;
  }

  .intro_photo {
    max-width: 350px;
  }

  /* --intro page-- */
  .main_intro-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* --intro service pages-- */
  .main_services-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .services_left,
  .services_right {
    width: 70%;
  }

  /* --price page-- */
  .price-page_price-list {
    width: 80%;
    margin: 50px auto; /* vycentruje blok */
    text-align: center; /* vycentruje text */
  }

  .service-page_article {
    width: 70%;
  }

  .price-list_classic-massage p,
  .price-list_traffic p {
    width: 100%;
  }

  /* --contact page-- */

  .main_contacts-wrapper {
    display: flex;
    flex-direction: column;
  }
  .contacts_right,
  .contacts_left {
    width: 70%;
  }

  /* --zobrazujeme kontakty ve vyjížděcím menu (kontakty stejné jako v div => top-bar (úplně nahoře)*/
  .main-nav .mobile-contact {
    display: block;
    margin-bottom: 20px;
  }

  .main-nav .mobile-contact span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    color: green;
  }
}