main { display: flex; gap: 2rem; margin-top: 2rem; margin-bottom: 2rem; margin-left: 20vw; margin-right: 20vw; .news-wrapper { max-width: 80vw; } .aside-wrapper { min-width: 20vw; } aside{ display: flex; flex-direction: column; align-items: center; padding: 2rem; background-color: var(--clr-LavenderLight); border-radius: 15px; top: 0; section#vstupenky-wrapper { display: flex; justify-content: center; width: 100%; margin-bottom: 2rem; } a.vstupenky { width: 80%; background-color: var(--clr-Melon); padding: 1rem 2rem; color: var(--clr-Murrey); text-decoration: none; font-weight: bold; font-size: 2rem; text-align: center; border-color: var(--clr-Murrey); border-radius: 15px; border-style: solid; border-width: 3px; } .infotable { display: flex; flex-direction: column; gap: 2rem; } .info-wrapper { display: flex; align-items: center; justify-content: center; gap: 4rem; color: var(--clr-Murrey); text-align: left; .text { h3 { font-weight: 900; } p { font-weight: 500; } } img { width: 100px; } } .info-wrapper:nth-child(even) { flex-direction: row-reverse; text-align: right; } } footer { display: flex; justify-content: center; flex-direction: column; align-items: center; margin: .5rem; font-size: 1rem; font-weight: 300; a, p { color: var(--clr-Murrey); } } } @media only screen and (max-width: 500px) { #vstupenky-wrapper { } .vstupenky { font-size: 1.5rem !important; } } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) and (max-width: 768px) { } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) and (max-width: 992px) { } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (max-width: 992px) { main { flex-direction: column; align-items: center; margin-left: 2vw !important; margin-right: 2vw !important; } .aside-wrapper { order: -1; } .info-wrapper { gap: 1rem !important; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (max-width: 1500px) { main { margin-left: 10vw; margin-right: 10vw; } .aside-wrapper { min-width: 40vw !important; } .news-wrapper { max-width: 70vw !important; } } @media only screen and (min-width: 1500px) and (max-width: 2000px) { main { margin-left: 15vw; margin-right: 15vw; } .aside-wrapper { min-width: 35vw !important; } }