@media screen and (max-width: 768px) {

    body{
        line-height: 3.0ch;
    }
    .hero-section h1{
        font-size: 3.5em;
    }
    .hero-section .col {
        max-width: none;
    }
    h2{
        line-height: 1.8ch;
    }

    header .flex{
        justify-content: center;
    }
    .header-nav{
        display: none;
    }

    .btn-group{
        flex-direction: column;
        width: 100%;
    }
    .btn:not(footer){
        width: 100%;
    }


    .bottom-accent{
        display: none;
    }

    .flex:has(.col){
        flex-direction: column;
    }
    form .col{
        width: 100%;
    }
    .images{
        gap: var(--spacer-md);
    }
    .images li img{
        width: 80vw;
    }
    .contact-info{
        text-align: center;
    }
}