@media (max-width: 640px) {
    body {
        /* font-size: 1.125rem; */
    }
    .title {
        font-size: 3rem;
    }
    .list {
        flex-direction: column;
        gap: 24px;
        padding: 0;
        margin-bottom: 15px;
    }
    .list-column {
        width: 100% !important;
    }
    .list .list-spacer {
        display: none;;
    }

    .hero {
        flex-direction: column;
    }

    .hero .hero-col {
        width: 100% !important;
    }
    
    .about {
        flex-direction: column;
    }

    .about-col {
        width: 100% !important;
    }
    .news-wrapper {
        flex-direction: column;
    }
    .news-col {
        width: 100% !important;
    }

    .what-i-do,
    .office-hours,
    .latest-content {
        flex-direction: column;
    }

    .what-i-do-col,
    .oh-col,
    .lc-col {
        width: 100% !important;
    }

    .socials .btn {
        margin-bottom: 15px;
    }
}