/* Cross-page responsive safety rules. Page/component-specific layout stays with its owner CSS. */
html, body { max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }

@media (max-width: 1200px) and (min-width: 1025px) {
    .container { width: min(100% - 48px, var(--container-width)); }
}
@media (max-width: 900px) and (min-width: 769px) {
    .container { width: min(100% - 40px, var(--container-width)); }
}
@media (max-width: 640px) {
    .container { width: min(100% - 32px, var(--container-width)); }
}
@media (max-width: 430px) {
    .container { width: min(100% - 24px, var(--container-width)); }
}
@media (max-width: 360px) {
    .container { width: min(100% - 20px, var(--container-width)); }
}