body .main-page .about-title {
    color: #fff;
}
body .main-page .about-content {
    margin-bottom: 20px;
}
body .main-page {
    background-image: url(/static/3c-town/images/desktop-bg-about_summer2022.jpg);
    background-position-x: right;
    background-position-y: bottom;
}
@media screen and (min-width: 768px) {
    body .main-page {
        height: calc(100vh - 60px - max(50px, 5vw));
    }
}
@media screen and (max-height: 480px) {
    body .main-page {
        height: auto;
    }
}
@media screen and (max-width: 767px) {
    body #main {
        background-image: url(/static/3c-town/images/bg-repeat.png) !important;
        background-repeat: repeat;
        background-position: top;
    }

    body .main-page {
        background-image: none;
        padding-bottom: 50vh;
    }
    body .main-page {
        background-image: url(/static/3c-town/images/mobile-bg-about_summer2022.jpg) !important;
        background-position: bottom !important;
        background-repeat: no-repeat;
        background-size: 100% auto !important;
    }

    body .main-page .about-title {
        width: 100%;
    }
    body .main-page .about-content {
        width: 100%;
        color: #ffffff;
    }
    body .main-page .about-button {
        width: 100%;
    }
}
@media screen and (max-width: 360px) {
    body .main-page .about-button button {
        width: 120px;
    }
}