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

    .hero header nav ul {
        padding: 30px 0;
        justify-content: flex-start;
        border: 0;
    }

    .hero header nav ul li:not(.brand-logo) {
        display: none;
    }

    .hero h1 {
        font-size: 7vh;
    }

    .about::before {
        height: 16vh;
    }

    .about__image {
        grid-column: 1/-1;
    }

    .about__image:before {
        content: none;
    }

    .about__image p {
        position: unset;
        margin: 0 var(--side-spacing) 40px;
        padding: 0px;
        color: black;
        font-size: 2.5vh;
        line-height: 3vh;
    }

    .about__image img{
        height: 30vh;
        width: 100%;
        object-fit: cover;
        object-position: right;
    }

    .commitment p{
        grid-column-end: inherit;
    }

    .commitment .wave-img{
        height: 100%;
        object-fit: cover;
        object-position: 70%;
    }

    .recent-drive__video figure img{
        height: 40vh;
        object-fit: cover;
    }

    .recent-drive__content{
        grid-column-start: inherit;
        text-align: center;
    }

    .volunteer{
        text-align: center;
    }

    .volunteer a{
        justify-content: center;
    }

    .volunteer .mountain-ouline{
        height: 110px;
        object-fit: cover;
        object-position: right;
    }
}

@media screen and (max-width: 992px) {
    
    .hero header nav ul{
        padding: 30px 0vw;
    }
}