@media (max-width: 767px){
    main {
        padding: 1.2rem;
        min-height: 90vh;
    }

    .display {
        font-size: 4.2rem;
        font-weight: 500;
    }

    .heading-3 {
        font-size: 1.8rem;
        font-weight: 300;
    }

    .body {
        font-size: 1.4rem;
    }

    .info-container {
        flex-direction: column-reverse;
        gap: 3.6rem;
        margin: 4.8rem 0;
    }

    .info-container .text-wrapper {
        max-width: 100%;
    }

    .image-wrapper .description-pic {
        width: 100%;
    }
    
    footer .contact {
        display: none;
    }

    footer .copyright {
        padding: 0;
    }
    
    footer {
        padding: 0 1.2rem;
        justify-content: center;
    }

    /*-----works-----*/
    .works-container .works-card {
        width: 100%;
    }

    .works-card .description-text {
        width: 100%;
    }

    /*------contact----*/
    
    .contact-list .contact-row {
        width: 100%;
    }

    .contact-row .content {
        width: 65%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /*-----template-------*/

    .project-container {
        flex-direction: column;
        gap: 36px;
    }

    .project-container .project-leftbar {
        max-width: 100vw;
        position: relative;
        height: fit-content;
        gap: 36px;
        top: 0;
    }

    .project-leftbar .description-container {
        gap: 0;
    }

    .project-container .project-rightbar {
        width: 100%;
    }

    .spaced-in {
        max-width: 100%;
        padding: 12px;
    }

    .sub-title-spacing {
        padding: 12px 0;
    }
}