/* Split-70-30.css */

.split-70-30 {
    margin-top: var(--section-gap);
    padding: 0 0 0 5vw; 
}
.split-70-30[data-reversed="true"] {
    padding: 0 5vw 0 0;
}

.split-70-30 .inner {
    min-height: 400px;
    display: grid;
    grid-template-columns: 3fr 7fr;
    column-gap: 5vw;
}
.split-70-30[data-reversed="true"] .inner {
    min-height: 400px;
    display: grid;
    grid-template-columns: 7fr 3fr;
}

.split-70-30 .text-container {
    background-color: white;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: min(5vw, 3rem);
    padding-right: min(5vw, 3rem);
}

.split-70-30 .text-container > *:not(:last-child) {
    margin-bottom: 1rem;
    text-align: left;
}


.split-70-30 .img-container  {
    background-color: lightgray;
    background-size: cover;
    background-position: center;
}
.split-70-30[data-reversed="true"] .img-container  {
    order: -1;
}
@media only screen and (max-width: 900px) {
    .split-70-30 {
        /* margin: 1.5rem; */
        /* padding: 0 5vw; */
        padding: 0;
    }
    .split-70-30[data-reversed="true"] {
        /* padding: 0 5vw; */
        padding: 0;
    }
    .split-70-30[data-reversed="true"] .img-container  {
        order: unset;
    }
    .split-70-30 .inner {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .split-70-30[data-reversed="true"] .inner {
        grid-template-columns: repeat(1, 1fr);
    }
    .split-70-30[data-reversed="true"] .text-container {
        background-color: rgb(var(--clr-light-blue), 0.5);
    }
    .split-70-30 .img-container  {
        min-height: 200px;
    }
}