:root {
    --twocol-leftside-width: 1fr;
    --twocol-leftside-backgroundColor: #fbe4c4;
    --twocol-rightside-width: 1fr;
    --twocol-rightside-backgroundColor: #b8e1e7;
    --twocol-gap: 6rem;
    --twocol-gap-line-width: 6px;
    --twocol-gap-line-color: #394f87;
    --twocol-padding: 1rem;
    --twocol-min-height: fit-content;
    --twocol-height: fit-content;
    --twocol-margin-bottom: 1rem;
    --twocol-width: 90%;
}
.twocol {
    display: grid;
    grid-template-columns: var(--twocol-leftside-width) var(--twocol-rightside-width);
    grid-template-rows: auto 1fr;
    min-height:var(--twocol-min-height);
    column-gap: var(--twocol-gap);
    box-sizing:border-box;
    position:relative;
    margin-bottom: var(--twocol-margin-bottom);
    height: var(--twocol-height);
    width: var(--twocol-width);
}
.twocol-heading {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.twocol-left {
    background-color: var(--twocol-leftside-backgroundColor);
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    padding: var(--twocol-padding);
    position: relative;
}
.twocol-left:after {
    content:"";
    position:absolute;
    top:0;
    right:calc(((var(--twocol-gap) / 2) * -1) - (var(--twocol-gap-line-width) /2));
    height:100%;
    width:var(--twocol-gap-line-width);
    background:var(--twocol-gap-line-color);
}
.twocol-right {
    background-color:var(--twocol-rightside-backgroundColor);
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    padding: var(--twocol-padding);
}
@media (max-width:780px) {
    .twocol {
        column-gap: 0;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        row-gap: var(--twocol-gap);
    }
    .twocol-heading {
        grid-row-start: 1;
        grid-row-end: 2;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .twocol-left {
        grid-column-start: 1;
        grid-column-end: 3;
        position:relative;
        margin-top:calc(var(--twocol-gap) * -1);
    }
    .twocol-left:after {
        content:"";
        position:absolute;
        top:calc(100% + (var(--twocol-gap) / 2) - (var(--twocol-gap-line-width) /2));
        left:0; 
        height:var(--twocol-gap-line-width);
        width:100%;
        background:var(--twocol-gap-line-color);
    }
    .twocol-right {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 3;
        grid-row-end: 4;
    }
}