web-semprace/sass/responsivity.scss

@media only screen and (min-width: 0px) and (max-width: 954px) {
  nav {
    flex-wrap: wrap;
  }
  .nav-right {
    display: none !important;
  }
  .mobile-visible {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap: 0rem !important;
  }
  .mobile-visible > *:first-child{
    border-top: 1px solid var(--clr-Murrey);

  }
  .mobile-visible > * {
    display: grid;
    place-content: center;
    width: 100%;
    padding: 1rem 0;
    border-bottom: 1px solid var(--clr-Murrey);
  }

  .nav-btn {
    display: flex !important;
    align-items: center;

    img {
      height: 3rem;
      cursor: pointer;
    }
  }

  .vstupenky {
    font-size: 1.5rem !important;
    width: 70vw !important;
  }
  main {
    flex-direction: column;
    align-items: center;
  }
  main aside .info-wrapper img {
    width: 50px;
  }
  .aside-wrapper {
    order: -1;
  }
  .info-wrapper {
    gap: 1rem !important;
  }

  footer:not(.footer-mobile) {
    display: none !important;
  }
  .footer-mobile {
    display: flex !important; 
  }
}

@media only screen and (min-width: 955px) and (max-width: 1090px) {
.vstupenky {
    font-size: 1.5rem !important;
  }
  main {
      flex-direction: column;
      align-items: center;
  }
  .aside-wrapper {
    order: -1;
  }
  .info-wrapper {
    gap: 1rem !important;
  }
  :root {
    --container-size: 20vw;
  }
  footer:not(.footer-mobile) {
    display: none !important;
  }
  .footer-mobile {
    display: flex !important; 
  }
}

@media only screen and (min-width: 1091px) and (max-width: 1499px) {
  :root {
    --container-size: 10vw;
  }
  .aside-wrapper {
    min-width: 40vw !important;
  }
  .news-wrapper {
    max-width: 50vw !important;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1500px) and (max-width: 1999px) {
  :root {
    --container-size: 15vw;
  }
  .aside-wrapper {
    min-width: 35vw !important;
  }
  .news-wrapper {
    max-width: 50vw !important;
  }
}

@media only screen and (min-width: 2000px) {
  :root {
    --container-size: 25vw;
  }
  .aside-wrapper {
    min-width: 25vw !important;
  }
  .news-wrapper {
    max-width: 50vw !important;
  }
}