:root{
    --section-padding: min(20vh, 100px);
    --section-padding-large: calc(var(--section-padding) * 1.3);
    --clipped-corner: 20%/* min(20%, calc((100dvw - var(--container-width)) / 2) + var(--gap) * 4) */;
    --clipped-corner-height: min(10dvh, calc(var(--section-padding) * 0.75));
    --clipped-corner-endheight: min(5dvh, calc(var(--section-padding) * 0.75));
    --col-width: min(852px, calc(100% - (var(--gap) * 2)));
}

.col-width{
    width: var(--col-width);
    margin-left: auto;
    margin-right: auto;
}

.archive .clipped-after::after,
.archive footer.clipped::before{
    display: none;
}

.archive .content-wrapper{
    min-height: unset;
}

.section-wrapper section{
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding-large);
}

.section-wrapper .two-col{
    display: grid;
    grid-template-columns: 27fr 53fr;
    gap: calc(var(--gap) * 2);
}

.section-wrapper section:nth-child(even),
.section-wrapper .clipped:nth-child(even)::before {
    background-color: var(--gray-background);
}

.clipped, .clipped-after{
    position: relative;
}

.clipped::before, .clipped-after::after{
    z-index: 1;
    content:"";
    position: absolute;
    bottom: calc(100% - 1px);
    left: 0;
    right: 0;
    height: var(--clipped-corner-height);
    background-color: #fff;
    clip-path: polygon(0 100%, 120% 100%, var(--clipped-corner) 0%, 0% var(--clipped-corner-endheight));
}

.clipped-after::after{
    top: calc(100% + 1px - var(--clipped-corner-height));
    bottom: unset;
}

footer.clipped::before{
    background-color: var(--blue);
}

.text-container{
    display: inline-block;
    width: auto;
    max-width: min(740px, 100%);
}

.margin-auto{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.section-padding-bottom{
    padding-bottom: calc(var(--section-padding)*0.75);
}

@media only screen and (max-width: 1199.98px) {

    :root{
        --col-width: min(calc(820px - var(--gap) * 2), calc(100% - (var(--gap) * 2)));
    }

    .section-wrapper .two-col{
        grid-template-columns: 100%;
    }

    .section-wrapper .responsive-col{
        width: min(var(--col-width), 100%);
        margin-left: auto;
    }
}

@media only screen and (max-width: 1023.98px) {

    :root{
        --col-width: min(calc(768px - var(--gap) * 2), calc(100% - (var(--gap) * 2)));
    }

}

@media only screen and (max-width: 767.98px) {

    :root{
        --section-padding: min(20vh, 80px);
    }
}

@media only screen and (max-width: 649.98px) {
    :root{
        --section-padding: min(15vh, 60px);
    }
}

@media only screen and (max-width: 549.98px) {
    :root{
        --clipped-corner-height: min(5dvh, calc(var(--section-padding) * 0.75));
        --clipped-corner-endheight: min(2dvh, calc(var(--section-padding) * 0.75));
    }
}