Content Video

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-content-video{
    @include padding-top(rem-calc(40));
	@include padding-bottom(rem-calc(40));

    @include bp($md){
        @include padding-top(rem-calc(70));
	    @include padding-bottom(rem-calc(60));
    }

    @include bp($xl){
        @include padding-top(rem-calcrem-calc(150));
	    @include padding-bottom(rem-calc(128));
    }

    &__heading{
        text-align: left;
        max-width: 770px;
        margin: 0 auto;
        padding: 0 rem-calc(10);

        @include bp($md){
            text-align: center;
            padding: 0;
        }

        h3{
            letter-spacing: -0.04em;
        }
    }

    &__image_container{
        max-width: 1026px;
        aspect-ratio: 1076/548;
        border-radius: 13px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
    }

    &__container{
        max-width: 1026px;
        margin: 0 auto;

        a{
            display: block;
            position: relative;
            border-radius: 13px;
            overflow: hidden;
            aspect-ratio: 1076/548;

            video,image{
                object-fit: cover;
            }

            span{
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 100%;
                background-color: #fff;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);

                width: rem-calc(66);
                height: rem-calc(66);
                z-index: 100;
            }

            &:after{
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,0.5);
                top: 0;
                left: 0;
                z-index: 10;
            }
        }
    }

    .body-content{
        max-width: 856px;
        margin: rem-calc(28) auto 0;
        padding: 0 rem-calc(10);
        
        @include bp($md){
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: rem-calc(24);
            margin: rem-calc(87) auto 0;
            padding: 0 rem-calc(0);            
        }

        ul,ol{
            margin: 0 0 1.5em;
            padding-left: rem-calc(18);
        }

        p,ul,ol,a{
            font-size: rem-calc(16);
            @include bp($md){
                font-size: rem-calc(18);
            }
        }
    }

    &__cta{
        @include margin-top(rem-calc(28));
    }
    .btn--hollow{
        @include fluid-type(16, 18);
        line-height: 1.5;
        letter-spacing: -4%;
        padding: rem-calc(8.5 20);        
    }

    .background-gradient{
        width: 720px;
        height: 395px;
    }
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/content-video",
    "title": "Content Video",
    "description": "Content & video block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-content-video.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/content-video/block-content-video.css"
}