@media screen and (max-width: 768px) {
    
    .home h1{    
        background: linear-gradient(to top, #B2BEBB 6%, white 10%);
        background-clip: text;
        opacity: 1;
    }
    .bs{
        height: calc(var(--area) + 100px);
    }
    .gallery .project{
        flex-wrap: wrap;
    }
    .project .project-d{
        translate: 0 -20px;
    }
    #about h1:nth-child(1) {
        position: static;
        translate: 0 0;
        height: fit-content;
    }
    #about p{
        width: auto;
    }
    #description .ribbon {
        height: 456px;
    }
    #description .triangle {
        width: 288px;
    } 
    #services .container{
        display: block;
    }
    #services .container .left{
        height: 0;
    }
    #services .container .left h1{
        translate: 0 -69px;
        font-size: clamp(3rem, 8vw, var(--xxl));
    }
    #service-t{
        font-size: clamp(1rem, 7vw, var(--xl));
    }


    .left-c  figure{
        display: none;
    }
    .left-c  span{
        display: none;
    }
    #services .right .spacer{
        display: none;
    }

}

@media screen and (max-width: 600px) {
    header{
        justify-content: center;
    }
    header .timelocation-container{
        display: none;
    }
    #contact{
        padding-right: 2rem;
        padding-left: 2rem;
    }
    #contact .flex-row{
        flex-wrap: wrap-reverse;
    }
    .contact-c{
        
        height: 63vh;
    }
    .contact-c:nth-child(1) {
        height: 27vh;;
    }
    .cbg .tbg{
        display: none;
    }
    .social-media{
        justify-content: center;
        translate: 50%;
        align-self: center;
        text-align: center;
    }
    .medias{
        gap: 1rem;
    }
}