#case-study {
    background-color: var(--smoke-300);
}

#case-study .grid {
    grid-template-columns: 1fr 400px;
    min-height: 100vh; 
}



#case-study .column {
    padding-top: 3.2rem;

}

#case-study .right {
    height: 100vh;
}

#case-study .header {
    border-bottom: 1px dashed var(--smoke-200);
}

#case-study .left {
}

#case-study .images {}

#case-study .header-close a {
    background-color: var(--orange-100);
    height: 1.75rem;
    width: 1.75rem;
    border-radius: 0.25rem; 
    color: white;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#case-study .description {
    text-wrap: pretty;
}

#case-study .next-project {
}

#case-study .small-arrow {
    line-height: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    border: 1px solid black;
}

#case-study .header-close a:hover {
    background: white;
    color: var(--orange-100);
}

.next-project-mobile {
    display: none;
}

#case-study .column.right {
    padding-right: 1.5rem;
    padding-top: 4.7rem;
    /* padding-bottom: 1.5rem; */
}

#case-study .column.left {
    padding: 1.5rem;
    padding-top: 4.7rem;
    padding-right: 0;
}
#case-study .small-arrow {
    transition: all 0.3s ease;
}

#case-study .next-project-desktop-inner * {
    transition: color 0.3s ease;
}

#case-study .next-project-desktop:hover {
    
    .next-project-desktop-inner * {
        color: var(--orange-100);
    }
    .small-arrow {
        transform: translateX(0.5rem);
        background: var(--orange-100);
        border-color: var(--orange-100);
        color: white;
    }
}

@media only screen and (max-width: 64rem) {
    #case-study .grid {
        grid-template-columns: 1fr;
    }
    #case-study .left {
        order: 2;
        display: flex;
        flex-direction: column;
        padding-top: 1rem;
        gap: 3rem;
    }

    #case-study .right {
        position: relative; 
        height: auto;
    }

    .next-project-desktop {
        display: none;
    }

    .next-project-mobile {
        display: block;
    }

    #case-study .column.right {
        padding: 1rem;
        padding-top: 4.7rem;
        /* padding-bottom: 1.5rem; */
    }
    
    #case-study .column.left {
        padding: 1rem;
    }

}