@media only screen and (max-width: 1024px) {
    
    h1 {
        font-family: 'ClashDisplay-Variable', sans-serif;
        font-weight: 500;
        font-style: normal;
        margin: 0;
        color: white;
    }
    
    h2 {
        font-family: 'ClashDisplay-Variable', sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0;
        color: white;
    }
    
    h3 {
        font-size: clamp(2.4rem, 2.4rem + 1vw, 3.2rem);
        font-family: 'ClashDisplay-Variable', sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0;
        color: white;
    }
    
    h4 {
        font-size: 20px;
        font-family: 'ClashDisplay-Variable', sans-serif;
        font-weight: 400;
        font-style: normal;
        margin: 0;
        color: white;
    }
    
    h5 {
        font-size: 18px;
        font-family: 'ClashDisplay-Variable', sans-serif;
        font-weight: 300;
        font-style: normal;
        text-transform: uppercase;
        margin: 0;
        color: white;
    }
    
    p {
        font-family: 'ClashDisplay-Variable', sans-serif;
        font-weight: 300;
        font-style: normal;
        line-height: 1.5;
        margin: 0;
        color: white;
    }
    
    .grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: 24px;
        padding: 0 40px;
    }

    .case-study-grid {
        grid-template-columns: 1fr;
        row-gap: 64px;
    }
    
    .spacer-320 {
        height: 160px;
    }
    
    .spacer-240 {
        height: 120px;
        grid-column: 1 / span 6;
        width: 100%;
    }
    
    .spacer-160 {
        height: 120px;
        grid-column: 1 / span 6;
        width: 100%;
    }
    
    .spacer-120 {
        height: 80px;
        grid-column: 1 / span 6;
        width: 100%;
    }
    
    .spacer-80 {
        height: 64px;
        grid-column: 1 / span 6;
        width: 100%;
    }
    
    .spacer-40 {
        height: 40px;
        grid-column: 1 / span 6;
        width: 100%;
    }
    
    /* NAV */
    .nav-logo img {
        margin-left: 40px;
    }
    
    .nav-items {
        margin-right: 40px;
    }
    
    
    /* SIDEBAR */
    
    /* HERO SECTION */
    
    .hero-cta-container {
        grid-column: 1 / span 6;
    }
    
    .hero-img-container {
        height: 100%;
        grid-column: none;
        top: 0;
    }
    
    .hero-subhead {
        width: 96%;
    }
    
    /* .homepage-hero-bg-img {
        width: auto;
        min-height: 100vh;
        margin-top: 0;
    } */

    .homepage-hero-bg-vid {
        width: 60vw;
        height: auto;
    }
    
    .hero-cta-desc {
        text-align: center;
    }
    
    .my-process-header {
        grid-column: span 6;
    }

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

    .process-number {
        bottom: 0;
    }

    /* PORTFOLIO SECTION */
    
    /* .section-header {
        grid-column: 1 / span 4;
    } */
    
    section.portfolio .new-slider .slick-arrow {
        filter: opacity(100%);
      }
    
    .portfolio {
        height: auto;
    }
    
    .slider-container {
        grid-column: 2 / span 5;
        width: 100%;
    }
    
    section.portfolio .new-slider .slick-list {
        padding-right: calc(((100vw - 128px) / 12) - 24px + 8px);
        margin-right: -24px;
    }
    
    .project-header {
        margin-top: 24px;
        color: white;
    }
    
    .portfolio-img-container { 
        background-color: hotpink;
        height: 480px;
        width: 100%;
    }
    
    .callout {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    
    .callout-container {
        grid-column: 1 / span 6;
        width: 80%;
        text-align: center;
    }
    
    /* EXPERIENCE SECTION */
    
    .experience-col-01 {
        grid-column: 1 / span 6;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    /* .content-section-01 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
    } */
    
    .content-section-container {
        grid-column: 1 / span 3;
        width: 100%;
    }
    
    .content-section-img-container {
        grid-column: 4 / span 3;
    }
    
    .content-section-img {
        display: block;
        width: inherit;
        height: auto;
        width: 100%;
    }
    
    .experience-stat-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
    }
    
    .experience-col-02 {
        margin-top: 120px;
        grid-column: 1 / span 6;
    }
    
    .company-name {
        margin-bottom: 24px;
    }
    
    .job-title {
        margin-bottom: 8px;
        width: 100%;
    }
    
    /* SERVICES SECTION */
    
    .services-container {
        list-style: none;
        counter-reset: item;
        grid-column: 1 / span 6;
        margin: 0;
        padding: 0;
    }
      
    .services-container li:before {
        grid-column: 1;
        margin-right: 0;
    }
    
    .service-header {
        width: 100%;
        grid-column: 2;
        margin: 0;
        float: left;
    }
    
    /* FOOTER */
    
    .footer {
        background-color: var(--ruby);
    }
    
    .footer-cta {
        grid-column: 1 / span 3;
        font-size: 40px;
    }
    
    .footer-contact-container, .footer-nav-container {
        margin-top: 0;
    }
    
    .footer-contact-container {
        grid-column: 4 / span 3;
    }
    
    .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 3;
    }
    
    .social-icons-container a {
        margin-right: 24px;
    }
    
    /* SINGLE PROJECT BODY */
    
    .single-project-body {
        padding: auto;
    }
    
    .project-title {
        grid-column: span 2;
    }
    
    .project-hero-container {
        height: 40vh;
    }
    
    .project-detail-heading-container {
        grid-column: 1 / span 2;
    }
    
    /* .project-detail-heading {
        line-height: 2.25;
    } */
    
    .project-detail-container {
        grid-column: span 2;
    }
    
    .project-intro-container {
     grid-column: span 2;
    }

    .project-detail-heading-container {
        width: 33.33%;
    }
    
    .project-intro {
        font-size: clamp(2.4rem, 2rem + 0.2vw, 2.6rem);
    }
    
    .project-img-span-3 {
        grid-column: span 6;
        height: 40vh;
    }
    
    .project-img-span-4 {
        height: auto;
        grid-column: span 6;
    }
    
    .project-img-span-6 {
        grid-column: span 6;
        height: auto;
    }
    
    .project-img-span-8 {
        grid-column: span 6;
        height: auto;
    }
    
    /* .project-img-section-01 {
        grid-column: 1 / span 6;
        height: 64vh;
    }
    
    .project-info-section-01 {
        grid-column: 1 / span 6;
        margin-top: 80px;
    }
    
    .project-img-section-02 {
        grid-column: 1 / span 6;
        height: 64vh;
    }
    
    .project-info-section-02 {
        grid-column: 1 / span 6;
        margin: 0;
        padding: 0;
        margin-bottom: 80px;
    }
    
    .project-info-section-02-subtext{ 
        grid-column: 1 / span 6;
        margin-top: 80px;
        height: auto;
    }
    
    .project-img-section-03 {
        grid-column: 1 / span 6;
        height: 64vh;
        margin-top: 0;
    }
    
    .project-info-section-03 {
        grid-column: 1 / span 4;
        margin-top: 0;
    }
    
    .project-img-section-04 {
        grid-column: 1 / span 6;
        margin-top: 80px;
        height: 64vh;
    }
    
    .project-img-full-width {
        grid-column: 1 / span 6;
        height: 64vh;
    } */
    
    .project-info {
        grid-column: 1 / span 6;
    }
    
    .project-cover-img-container {
        grid-column: 1 / span 6;
        height: 60vh;
        padding-top: 64px;
    }
    
    .project-arrow-container {
        margin-top: 40px;
    }
    
    }