@media screen and (max-width: 960px) {
    .container{ width: 98%; max-width: 98%;}
    #main-menu{ display:none; }
    #logo { text-align: center; float:none;}
    #banner{ width:100%; font-size:80%; background-position: top center;}
    .three-columns, .two-columns { width: 100%; float: none; clear: both; text-align: center; margin-bottom: 20px; margin-left: 0; }
    footer{ text-align: center;}
}

@media (max-width: 900px) {
    #slogan .container {
    flex-direction: column;
    gap: 32px;
    padding: 0 10px;
    }
    #slogan .slogan-text, #slogan .slogan-img {
    max-width: 100%;
    width: 100%;
    align-items: center;
    text-align: center;
    }
    #slogan .slogan-text { text-align: center; }
}