.case-studies h1 {
    grid-column: 2 / -2;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.case-studies-grid {
    max-width: 256rem;
    display: grid;
    place-items: center;
    margin-left: auto;
    margin-right: auto;
}
.case-studies-grid > div {
    --translateX: -50%;
    --falloff: 1;
    position: relative;
    left: 50%;
    transform: translateX(calc(var(--translateX) * var(--falloff)));
    flex-shrink: 0;
    padding-top: calc(var(--default-padding) * 2);
    max-width: none;
    width: 115%;
    --percentage: 0.05;
}
.case-studies-grid > div > div {
    display: grid;
    row-gap: 4.8rem;
    column-gap: var(--grid-gap);
    grid-column: 1 / -1;
    grid-template-columns: repeat(24, 1fr);
    transform: translateY(calc((var(--default-padding) * (-0.5 - var(--percentage))) * var(--falloff)));
    
}

.case-studies-grid a > div {
    transition: opacity 0.35s var(--default-animation);
}
.case-studies-grid.hover a:not(.hover) > div {
    opacity: 0.75;
    background-color: red;
}

.case-image-container-outer {
    overflow: hidden;
    border-radius: var(--default-border-radius);
}
.case-image-container {
    overflow: hidden;
    transform: scale(102%);
    transition: transform 0.35s var(--default-animation);
}
.case-image-container:hover {
    transform: scale(109%);
}
.case-studies-grid a {
    width: 100%;
}
.case-studies-grid a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--clr-secondary-750);
}
.case-studies-grid a .case-image-text {
    gap: 1.6rem;
    margin-top: 1.2rem;
    justify-content: space-between;
}
.case-studies-grid a .case-image-text div {
    flex-wrap: wrap;
    column-gap: 0.5ch;
}
.case-studies-grid a .case-image-text > p {
    text-align: end;
    flex-shrink: 2;
}

#case-study-1 {
    grid-column: 2 / 5;
    margin-top: auto;
    transform: translateY(20%);
}
#case-study-2 {
    grid-column: 6 / 12;
}
#case-study-3 {
    grid-column: 15 / 19;
}
#case-study-4 {
    grid-column: 13 / 16;
    margin-top: -4.8rem;
}
#case-study-5 {
    grid-column: 20 / 23;
    margin-top: -4.8rem;
    transform: translateY(-20%);
}
#case-study-6 {
    grid-column: 3 / 6;
    margin-bottom: auto;
    margin-top: -9.6rem;
}
#case-study-7 {
    grid-column: 9 / 13;
}
#case-study-8 {
    grid-column: 16 / 19;
    margin-top: auto;
    margin-bottom: auto;
}
#case-study-9 {
    grid-column: 21 / 24;
}


.case-studies-grid .case-image-text {
    margin-top: 1.6rem;
}

@media only screen and (max-width: 1199px) {
    .case-studies-grid > div {
        width: 100%;
        transform: translateX(-50%);
        padding-top: var(--default-padding);
        padding-bottom: var(--default-padding);
    }
    .case-studies-grid > div > div {
        transform: translateY(0);
        grid-template-columns: var(--grid);
    }
    
    #case-study-1, #case-study-2, #case-study-3, #case-study-4, #case-study-5, #case-study-6, #case-study-7, #case-study-8, #case-study-9 {
        grid-column: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        transform: none;
    }
    #case-study-1 {
        grid-column: 1 / 6;
        grid-row: 1 / 3;
    }
    #case-study-2 {
        grid-column: 6 / -1;
    }
    #case-study-3 {
        grid-column: 6 / -1;
    }
    #case-study-4 {
        transform: translateY(-30%);
        grid-column: 1 / 4;
    }
    #case-study-5 {
        grid-column: 4 / -2;
    }
    #case-study-6 {
        grid-column: 2 / 5;
    }
    #case-study-7 {
        grid-column: 1 / 4;
    }
    #case-study-8 {
        grid-column: -4 / -1;
        grid-row: 4;
    }
    #case-study-9 {
        grid-column: -3 / -1;
        transform: translateY(-30%);
    }
    .case-studies-grid a .case-image-text {
        margin-top: 0.8rem;
    }
}
@media only screen and (max-width: 800px) {
    .case-studies h1 {
        grid-column: 1 / -1;
    }
    .case-studies-grid a {
        grid-column: 1 / -1 !important;
        transform: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}