:root {
    --two-column-content-max-width: 1920px;
    --two-column-content-media-padding-bottom: 54.75%;
    --two-column-content-image-border-radius: 0;
    --two-column-content-image-overlay-max-width: 680px;
    --two-column-content-text-max-width: 42.5rem;
}

.frame-type-freyhauer_twocolumncontent {
    .container-fluid {
        @media (min-width: 998px) {
            padding: 0;
        }
    }
}

.two-column-content {
    --bs-gutter-x: 30px;
    max-width: var(--two-column-content-max-width);
    img {
        z-index: 10;
        position: relative;
    }
}
.two-column-content img {
    width: 100%;
    height: 100%;
}
.two-column-content__content--text {
    grid-area: text;
    /*padding-right: calc(var(--bs-gutter-x) * 0.5);*/
    /*padding-left: calc(var(--bs-gutter-x) * 0.5);*/
    display: flex;
    flex-direction: column;
    max-width: var(--two-column-content-text-max-width);
}

@media (min-width: 1921px) {
    .two-column-content__content--text {
        margin-left: 240px;
        padding-right: 3.5rem;
    }
}

@media (max-width: 1920px) {
    .two-column-content__content--text {
        padding-left: calc((100vw - 1440px) / 2);
        padding-right: 15px;
    }
}

.two-column-content__content--media {
    grid-area: media;
}
.two-column-content__media-wrap {
    position: relative;
    /*padding-bottom: var(--two-column-content-media-padding-bottom);*/
}
/*.two-column-content__picture {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/
.two-column-content__image {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    border-radius: var(--two-column-content-image-border-radius);
    /*width: 960px !important;*/
}

.two-column-content__image-overlay {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(100% + 20%);
    transform: translateY(-50%);
    max-width: var(--two-column-content-image-overlay-max-width);
}

/* Media left */
.two-column-content--image-left .two-column-content__image {
    /*border-radius: 0 var(--two-column-content-image-border-radius) var(--two-column-content-image-border-radius) 0;*/
}
.two-column-content--image-left .two-column-content__image-overlay {
    transform: translateY(-50%) rotateY(180deg);
    left: auto;
}

/* Video */
.two-column-content__media-wrap {
    --plyr-video-control-background-hover: var(--bs-primary);
    --plyr-video-control-color: var(--bs-white);
    --plyr-control-icon-size: 28px;
    --plyr-color-main: var(--bs-primary);
    .plyr {
        border-radius: var(--two-column-content-image-border-radius);
    }
    .plyr__control--overlaid {
        padding: 2rem;
        box-shadow: var(--bs-box-shadow);
    }
}

@media (min-width: 768px) {
    .two-column-content__image-overlay {
        width: calc(100% + 10%);
    }
}
@media (min-width: 992px) {
    .two-column-content__image-overlay {
        left: -1rem;
    }
    .two-column-content--image-right .two-column-content__image-overlay {
        left: -1rem;
    }
}
@media (max-width: 1199px) {
    .frame-type-freyhauer_twocolumncontent {
        .frame-type-header {
            max-width: 42.5rem;
            margin: 0 auto 2rem;
        }
        .fyh-header {
            .text-right {
                text-align: left !important;
            }
        }
    }
}
@media (min-width: 1200px) {
    .two-column-content {
        --bs-gutter-x: 0px;
        display: grid;
        margin: auto;
        grid-template-areas: "media media media media media media text text text text text text";
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
        align-items: center;
    }
    .two-column-content--image-right {
        &.grid-8v4 {
            grid-template-areas: "text text text text text text text text media media media media";
        }
        &.grid-5v7 {
            grid-template-areas: "text text text text text media media media media media media media";
        }
    }
}