/* 1344px */

@media (max-width: 84em) {
  .workout {
    gap: 0.75rem 1rem;
    padding: 1.5rem 2rem;
  }
  .logo {
    height: 4.2rem;
    margin-bottom: 3rem;
  }
  .sidebar {
    padding: 2.5rem 4.5rem 3rem 4.5rem;
  }
}

/* 1000px */

@media (max-width: 62.5em) {
  html {
    font-size: 60%;
  }
  body {
    padding: 2rem;
  }
  .sidebar {
    padding: 2.5rem 4rem 2rem 4rem;
    flex-basis: 40rem;
  }
  .workouts {
    height: 65vh;
  }
  .workout {
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
  }
  .form {
    padding: 1rem 1.25rem;
    gap: 0.4rem 1rem;
  }
}

/* 896px */

@media (max-width: 56em) {
  html {
    font-size: 65%;
  }
  body {
    flex-direction: column;
    padding: 0;
    height: 100vh;
  }
  .logo {
    height: 5.2rem;
    margin-bottom: 2rem;
  }
  .leaflet-popup .leaflet-popup-content-wrapper {
    padding-right: 0.3rem;
  }
  .sidebar {
    padding: 2rem 2.5rem 1.75rem 2.5rem;
    flex-basis: 30rem;
  }
  .workouts {
    height: 30vh;
  }
  .workout {
    gap: 0.6rem 0.8rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
  }
  .form {
    padding: 0.75rem 1rem;
    gap: 0.2rem 0.8rem;
    margin-bottom: 1.25rem;
  }

  .form__input {
    padding: 0.3rem 0.5rem;
    font-size: 16px;
  }
  .form__submit {
    left: 45%;
    padding: 0.5rem 1rem 0.5rem 1rem;
    bottom: 2rem;
  }
}

@media (max-width: 36.25em) {
  html {
    font-size: 50%;
  }

  .logo {
    height: 4.2rem;
  }
  .form__input {
    font-size: 16px;
  }
  .workouts {
    height: 20vh;
  }
  .form__submit {
    left: 42%;
  }
}