.half-content-half-media {
    position: relative;
    overflow: hidden;

    @include breakpointMax(md) {
        padding-bottom: 0 !important;
    }

    &.has-line {
        .col-media {
            .video-wrap,
            .img-wrap {
                position: relative;

                &:before {
                    content: '';
                    position: absolute;
                    border: 2px solid $yellow;
                    display: none;

                    @include breakpoint(md) {
                        display: block;
                    }
                }
            }
        }
    }

    .text-overlay {
        stroke: $yellow;
        line-height: 0.175;
        z-index: 1;
        display: none;

        @include breakpoint(md) {
            font-size: 400px;
            display: block;
        }
    }

    &.media-left {
        &.has-line {
            .col-media {
                .video-wrap,
                .img-wrap {
                    &:before {
                        top: -30px;
                        right: -30px;
                        bottom: -999px;
                        left: -999px;
                    }
                }
            }
        }

        .container {
            max-width: 100%;
        }

        .col-text {
            .text-wrap {
                @include breakpoint(md) {
                    padding-left: 5%;
                }

                @include breakpoint(lg) {
                    // max-width: 450px;
                    max-width: 540px;
                }
            }
        }

        .col-media {
            @include breakpoint(md) {
                order: -1;
                padding-left: 0;
            }

            .video-wrap,
            .img-wrap {
                @include breakpoint(md) {
                    margin-left: -7px;
                }

                // @include breakpoint(lg) {
                // 	margin-left: -2px;
                // }

                // &:before {
                // 	top: -30px;
                // 	right: -30px;
                // 	bottom: -999px;
                // 	left: -999px;
                // }
            }
        }
    }

    &.media-right {
        &.has-line {
            .col-media {
                .video-wrap,
                .img-wrap {
                    &:before {
                        top: -999px;
                        left: -30px;
                        bottom: -30px;
                        right: -999px;
                    }
                }
            }
        }

        .col-media {
            .video-wrap,
            .img-wrap {
                @include breakpoint(md) {
                    width: 50vw;
                }
            }
        }

        .col-text {
            @include breakpoint(md) {
                padding-right: 5%;
            }
        }
    }

    .col-media {
        @include breakpointMax(md) {
            padding: 0;
            margin: 0 -5px;
            width: 100vw;
            flex: none;
            max-width: inherit;
        }

        .video-wrap,
        .img-wrap {
            border: 2px solid $yellow;

            > img:not(.btn-play) {
                width: 100%;
            }
        }
    }

    .col-text {
        margin-bottom: 60px;
        position: relative;
        z-index: 1;

        @include breakpoint(md) {
            margin-bottom: 0;
        }

        h2 {
            letter-spacing: -0.5px;
            text-transform: uppercase;
            @include breakpoint(md) {
                margin-top: 15px;
            }
        }

        p {
            // max-width: 360px;
            margin-bottom: 24px;

            &:last-child {
                margin-bottom: 0;
            }

            @include breakpoint(xl) {
                margin-bottom: 40px;
            }
        }

        .list-with-icon {
            @extend %listreset;
            li {
                margin-bottom: 16px;
                display: flex;
                flex-wrap: wrap;
                align-items: center;

                .icon-wrap {
                    margin-right: 16px;
                    width: 50px;
                }

                .text {
                    width: calc(100% - 50px - 16px);
                }
            }
        }
    }

    .video-wrap {
        position: relative;

        .btn-play {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;

            img {
                @include breakpointMax(md) {
                    width: 40px;
                    height: auto;
                }
            }

            &:hover {
                opacity: 0.7;
            }
        }
    }
}