/* --- 1280px --- */
@media only screen and (max-width: 1280px) {
  :root {
    --font-size-large: 2.5rem;
    --font-size-medium: 1.6rem;
    --margin-large: 40px;
    --section-margin-bottom: 60px;
  }

  #ThirdSection .tour-cards {
    flex-wrap: wrap;
    justify-content: center;
  }
  #ThirdSection .tour-cards .tour-card {
    width: 45%;
    margin-bottom: 20px;
  }
}

/* --- 1040px --- */
@media only screen and (max-width: 1040px) {
  :root {
    --font-size-large: 2rem;
    --font-size-medium: 1.4rem;
    --margin-medium: 20px;
    --margin-large: 30px;
  }

  #FourthSection .sanatoriums .sanatorium-card video {
    height: 400px;
  }

  #Header .links-side {
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }
  #Header .links-side a {
    margin: 10px;
  }

  #FourthSection .sanatoriums .sanatorium-card {
    width: 90%;
  }
}

/* --- 950px --- */
@media only screen and (max-width: 950px) {
  :root {
    --font-size-large: 1.6rem;
    --font-size-medium: 1.2rem;
    --font-size-small: 0.9rem;
    --section-margin-bottom: 40px;
  }

  #MainSection {
    background-image: url('../images/tibet21-mobile-comp.jpg');
  }

  
  #FourthSection .sanatoriums .sanatorium-card {
    width: 90%;
    background-color: var(--white-color);
  }

  #FourthSection .sanatoriums .sanatorium-title {
    color: var(--black-color);
  }
  section {
    padding: 0% 5%;
  }

  #ThirdSection .tour-cards .tour-card {
    width: 100%;
  }

  #SecondSection .cards .card {
    width: 160px;
    height: 240px;
  }
}

/* --- 500px --- */

@media only screen and (max-width: 500px) {
  #Header{
    height: 100%;
    flex-direction: column;
  }
  #Header .logo-side{
    margin-top: 6vh;
  }
  #Header .links-side button{
    margin-bottom: 10vh;
  }
}

/* --- 350px --- */
@media only screen and (max-width: 350px) {
  :root {
    --font-size-large: 1.2rem;
    --font-size-medium: 1rem;
    --font-size-small: 0.8rem;
    --margin-small: 10px;
    --margin-medium: 15px;
    --margin-large: 20px;
  }

  #Header .logo-side img {
    height: 80px;
  }
  #Header .links-side {
    flex-direction: column;
    margin-bottom: 10px;
  }
  #Header .links-side a {
    margin: 5px 0;
    font-size: 1rem;
  }

  #SecondSection .cards .card {
    width: 120px;
    height: 180px;
  }

  form {
    width: 90%;
  }
}