CSS3 Responsive Design

@media (max-width: 768px) { # mobile devices
    .container { width: 100%; }
}
@media (min-width: 769px) { # desktop
    .container { width: 1200px; }
}

@media (max-width: 576px) { } # mobile
@media (min-width: 577px) and (max-width: 768px) { } # tablet
@media (min-width: 769px) and (max-width: 992px) { } # laptop
@media (min-width: 993px) { } # desktop

width: 100vw; # viewport width
height: 100vh; # viewport height
font-size: 5vw; # responsive font

max-width: 100%; # never exceed container
height: auto; # maintain aspect ratio
object-fit: cover; # cover, contain, fill

@container (min-width: 400px) { # container-based
    .card { display: flex; }
}