/* 1024 x 600 */
    
@media (max-width: 1024px) {

    /* Font Sizes */
    .body-text {
        font-size: .875rem;
    }

    .medium-text {
        font-size: 1.25rem;
    }

    .large-text {
        font-size: 1.75rem;
    }

    .larger-text {
        font-size: 2.75rem;
    }

    .caption-text {
        font-size: 0.85rem;
    }

    .header-text {
        font-size: 0.75rem;
    }   


    .footer {
        flex-direction: row;
    }
    
    /* spacing */

    .xxs {
        gap: 0.25rem;
    }

    .xs {
        gap: 0.75rem;
    }

    .s {
        gap: 0.875rem;
    }

    .m {
        gap: 1rem;
    }

    .m2 {
        gap: 1.5rem;
    }

    .l {
        gap: 2rem;
    }

    .xl {
        gap: 3rem
    }

    .xxl {
        gap: 6rem;
    }    
}


/* Initial Hiding */

.view-when-mobile {
    display: none;
}

.view-when-tablet {
    display: none;
}


@media (max-width: 768px) {

.nav-bar-container {
    padding: 1rem 1rem 0rem 1rem;
}

.bottom-nav-bar-container {
    padding: 0rem 1rem 1rem 1rem;
}

.hide-when-tablet {
    display: none;
}

.view-when-tablet {
    display: block;
}

/* Footer */

.footer {
flex-direction: column;
}   

/* Margins */

.margins {
    margin: 0rem 1rem;
}

/* Case Study Hero Section */
    .landing-section-container {
    flex-direction: column;
    }
    
    .project-thumbnail, .project-details {
        position: relative;
        top: 0;
    }

}

@media (max-width: 425px) {

/* Nav Bar Margins*/

.nav-bar-container {
    padding: 1rem 0.25rem 0rem 0.25rem;
}

.bottom-nav-bar-container {
    padding: 0rem 0.25rem 1rem 0.25rem;
}

/* Mobile Revealing*/

.view-when-mobile {
    display: block;
}

.hide-when-mobile {
    display: none;
}

/* Three Box Component*/

.three-box-container {
    flex-direction: column;
}

/* Margins */

.margins {
    margin: 0rem 0.25rem;
}

/* Image and XYZ Components */

.two-figure-row {
flex-direction: column;
}


.xxl {
    gap: 3rem;
}

/* Top/Bottom Padding */

.padding-l {
    padding: 2rem 0rem;
}

.padding-xl {
    padding: 8rem 0rem;
}

.padding-vh {
    padding: 50dvh 0rem;
}

}