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

    .spacer-320 {
        height: 240px;
        grid-column: 1 / span 4;
    }
    
    .spacer-240 {
        height: 120px;
        grid-column: 1 / span 4;
    }
    
    .spacer-160 {
        height: 80px;
        grid-column: 1 / span 4;
    }
    
    .spacer-120 {
        height: 64px;
        grid-column: 1 / span 4;
    }
    
    .spacer-80 {
        height: 80px;
        grid-column: 1 / span 4;
    }
    
    .spacer-40 {
        height: 40px;
        grid-column: 1 / span 4;
    }
        
    .spacer-24 {
        height: 24px;
        grid-column: 1 / span 4;
    }
    
    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 16px;
        padding: 0 24px;
    }

    .case-study-grid {
        position: relative;
        column-gap: 16px;
        padding: 0 24px;
    }

    .gallery-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
        padding: 0 24px;
    }
    
    /* NAV */
    .nav-logo img {
        margin-left: 24px;
    }
    
    .nav-items {
        display: none;
        margin-right: 24px;
    }
    
    #nav-icon4 {
        display: block;
    }
    
    .nav-item:nth-child(2) {
        margin: 0 24px;
    }
    
    .project-hero-container {
        grid-column: 1 / span 4;
        max-height: 64vh;
        object-fit: cover;
    }
    
    .hero-cta-container {
        margin-bottom: 0;
        grid-column: 1 / span 4;
    }

    .hero-cta-italic {
        width: 100%;
    }

    .hero-subhead {
        margin-top: 0px;
        font-size: 2rem;
        width: 100%;
    }
    
    /* .homepage-hero-bg-img {
        position: inherit;
        right: -8vw;
    } */
    
    .homepage-hero-bg-vid {
        height: auto;
        width: 80vw;
    }

    .callout-container {
        grid-column: 1 / span 4;
        width: 100%;
    }
    
    /* .hero-cta-desc {
        margin: 24px 0 0 0;
        width: 100%;
    } */

    img.portfolio-image {
        border-radius: 16px;
    }
    
    section.portfolio .new-slider .slider-item {
        margin-right: 16px;
    }
    
    section.portfolio .new-slider .slick-list {
        padding-right: calc(((100vw - 128px) / 12) * 2 - 24px + 8px);
    }
    
    section.portfolio .new-slider .slick-prev {
        margin-left: 24px;
    }
    
    section.portfolio .new-slider .slick-next {
        margin-right: 24px;
    }
    
    .slider-container {
        grid-column: 1 / span 4;
    }
    
    .content-section-container {
        grid-column: 1 / span 4;
        width: 100%;
    }
    
    .content-section-img-container {
        margin-top: 80px;
        grid-column: 1 / span 4;
        width: 100%;
        height: auto;
    }
    
    .experience-col-01 {
        grid-column: 1 / span 4;
        width: 100%;
    }
    
    /* .experience-button { 
        width: 100%;
    } */

    .my-process {
        grid-gap: 24px;
    }

    .my-process-header {
        grid-column: span 4;
    }

    .my-process-section {
        padding: 24px;
        grid-column: span 4;
    }

    .job-container {
        display: flex;
        flex-direction: column;
    }

    .process-number {
        bottom: 0;
    }
    
    .experience-col-02 {
        margin-top: 120px;
        display: flex;
        flex-direction: column;
        grid-column: 1 / span 4;
    }
    
    .stat-col-01 {
        flex-direction: column;
        text-align: center;
    }
    
    .stat-col-02 {
        flex-direction: column;
        text-align: center;
    }
    
    .experience-stat-num {
        width: 100%;
    }
    
    .experience-stat {
        width: 100%;
    }
    
    .company-name a {
        color: var(--ruby);
    }
    
    .services-container {
        list-style: none;
        counter-reset: item;
        grid-column: 1 / span 4;
    }
      
    .services-container li:before {
        grid-column: 1;
        margin-right: 0;
    }
    
    .service-header {
        width: 100%;
        grid-column: 2 / span 3;
        margin: 0 0 16px 0;
        float: left;
    }
    
    .service-arrow-container {
        grid-column: 2;
    }
    
    .project-info-section-02 {
        grid-column: 1 / span 4;
        margin-top: 80px;
    }
    
    /* FOOTER */
    
    .footer-cta {
        grid-column: 1 / span 4;
        font-size: 40px;
    }
    
    .footer-contact-container, .footer-nav-container {
        margin-top: 40px;
    }
    
    .footer-contact-container {
        grid-column: 1 / span 4;
    }
    
    .footer-contact-list, .footer-nav-list {
        margin-top: 16px;
    }
    
    .footer-contact-detail, .footer-nav-item {
        font-size: 24px;
    }
    
    .footer-nav-container {
        grid-column: 1 / span 4;
    }
    
    .social-icons-container a {
        margin-right: 24px;
    }
    
    .project-title {
        grid-column: span 4;
    }
    
    .project-intro-container {
        grid-column: span 4;
    }
    
    .project-detail-heading-container {
        grid-column: 1;
    }
    
    .project-detail-container {
        grid-column: span 2;
    }

    .project-img-half {
        grid-column: span 2;
    }

    .project-img-full {
        grid-column: span 2;
    }
    
    .project-img-span-3 {
        grid-column: span 4;
        height: 40vh;
        margin-top: 24px;
    }
    
    .project-img-span-4 {
        height: auto;
        grid-column: span 4;
        margin-top: 24px;
    }
    
    .project-img-span-6 {
        grid-column: span 4;
        height: auto;
        margin-top: 24px;
    }
    
    .project-img-span-8 {
        grid-column: span 4;
        height: auto;
        margin-top: 24px;
    }

    .project-img-span-9 {
        grid-column: span 4;
        height: auto;
        margin-top: 24px;
    }

    .project-img-span-12 {
        grid-column: span 4;
        height: auto;
        margin-top: 24px;
    }

    .project-arrow-container {
        height: 40px;
        width: 40px;
    }

    .project-list {
        margin-top: 40px;
    }

    .project-cover-img-container {
        grid-column: 4span 6;
        height: 40vh;
        padding-top: 64px;
    }
    
    .case-study-section-name {
        margin-bottom:-40px;
        }
}