body {
    --mobile-break-point: 700px;
}

.en-video-module * {
    box-sizing: border-box;
}

.en-video-module {

    --video-module-background: #fff;

    --video-module-title-font-size: inherit;
    --video-module-title-font-family: inherit;
    --video-module-title-color: #000;
    --video-module-title-bg-color: #f6f6f6;

    --video-title-color: #000;
    --video-title-bg-color: #f6f6f6;
    --video-title-font-size: clamp(18px, 2vw, 22px);
    --video-title-font-family: inherit;

    --video-title-border-color: #e6ebf5;

    --video-height: 360px;
    --video-width: 640px;

    --layout-2-background-color: #f0f0f0;
}

.en-video-module {
    grid-template-areas: "module-title" "video" "video-title";
    background-color: var(--video-module-background);
}

.en-video-module .en-video-module-title {
    grid-area: module-title;
    display: flex;
    align-items: center;
}

.en-video-module h2.en-video-module-title a {
    font-family: var(--video-module-title-font-family);
    font-size: var(--video-module-title-font-size);
    background-color: var(--video-module-title-bg-color);
    color: var(--video-module-title-color);
}

.en-video-module .video-player {
    grid-area: video;
    width: var(--video-width);
    height: var(--video-height);
    display: flex;
}

.en-video-module video {
    max-height: var(--video-height);
    width: 100%;
    height: auto;
}


.en-video-module .videoTitle {
    grid-area: video-title;
}

.en-video-module .videoDesc {
    grid-area: desc;
}


@media (max-width: 700px) {
    .en-video-module {
        grid-template-areas: "module-title" "video" "video-title";
        width: fit-content;
    }

}


/* Video Layout*/

:not(.video-1-2) .en-video-module {
    width: var(--video-width);
    margin-bottom: 50px;
}

/* Video Module Title START */

/* Video Module  Title Show/Hide */
.module-title-1-2 .en-video-module .en-video-module-title {
    display: none;
}

/* Video Module title Alignment */

.en-video-module .en-page-components-title {
    justify-content: center;
    margin-inline: auto;
}

:not(.video-1-2).module-title-2-2 .en-video-module .en-page-components-title {
    justify-content: flex-start;
    margin-inline: 0;
}

:not(.video-1-2).module-title-2-3 .en-video-module .en-page-components-title {
    justify-content: flex-start;
    padding-left: 10px;
    margin-inline: 0;
}

:not(.video-1-2).module-title-2-4 .en-video-module .en-page-components-title {
    justify-content: flex-end;
    padding-right: 10px;
    margin-inline: 0;
}

:not(.video-1-2).module-title-2-5 .en-video-module .en-page-components-title {
    justify-content: flex-end;
    margin-inline: 0;
}

.video-1-2 .en-video-module .en-page-components-title {
    margin-block: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.video-1-2.module-title-2-2 .en-video-module .en-page-components-title {
    align-items: flex-start;
}

.video-1-2.module-title-2-3 .en-video-module .en-page-components-title {
    align-items: flex-start;
    padding-top: 10px;
}

.video-1-2.module-title-2-4 .en-video-module .en-page-components-title {
    align-items: flex-end;
    padding-bottom: 10px;
}

.video-1-2.module-title-2-5 .en-video-module .en-page-components-title {
    align-items: flex-end;
}


/* Video Module Title END */


/* Video Title START */

.en-video-module .videoTitle {
    display: flex;
    margin-block: 0;
    align-items: center;
    background-color: var(--video-title-bg-color);
    padding-block: calc(var(--video-title-font-size) * 0.8);
}


.en-video-module .videoTitle a {
    text-decoration: none;
    font-family: var(--video-title-font-family);
    font-size: var(--video-title-font-size);
    color: var(--video-title-color);
}


/* Show/Hide */
.video-title-1-2 .en-video-module .videoTitle {
    display: none;
}

/* Video Title Alignment */

.en-video-module .videoTitle {
    justify-content: center;
    text-align: center;
}

.video-title-2-2 .en-video-module .videoTitle {
    justify-content: flex-start;
}

.video-title-2-3 .en-video-module .videoTitle {
    justify-content: flex-start;
    padding-left: 10px;
}

.video-title-2-4 .en-video-module .videoTitle {
    justify-content: flex-end;
    padding-right: 10px;
}

.video-title-2-5 .en-video-module .videoTitle {
    justify-content: flex-end;
}

.video-title-2-6 .en-video-module .videoTitle {
    justify-content: center;
    padding-block: 0;
    padding-top: calc(var(--video-title-font-size) * 1.5);
}

/* Video Title Border*/

:not(.video-1-2).video-title-3-2 .en-video-module .videoTitle {
    border-bottom: 2px solid var(--video-title-border-color);
    border-left: 2px solid var(--video-title-border-color);
    border-right: 2px solid var(--video-title-border-color);

}

:not(.video-1-2).video-title-3-2.video-title-2-2 .en-video-module .videoTitle,
:not(.video-1-2).video-title-3-2.video-title-2-5 .en-video-module .videoTitle {
    padding-inline: 10px;
}

:not(.video-1-2).video-title-3-3 .en-video-module .videoTitle {
    border-bottom: 2px solid var(--video-title-border-color);
}

:not(.video-1-2):not(.video-2-2):not(.video-2-3):not(.video-2-4).video-title-3-4 .en-video-module .videoTitle {
    box-shadow: 5px 5px 10px 5px var(--video-title-border-color);
    background: transparent;
}

/* Module Shadow */


:not(.video-1-2).video-2-2 .en-video-module .video-player {
    box-shadow: 0px 0px 18px 2px rgba(0, 0, 0, 0.18);
    padding: 15px 15px 50px;
}


:not(.video-1-2).video-2-2 .en-video-module .videoTitle {
    background: none;
    border: none;
}

:not(.video-1-2).video-2-3 .en-video-module .video-player {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
}

:not(.video-1-2).video-2-3 .en-video-module .videoTitle {
    background: none;
    border: none;
}

/* Layout 2*/


.video-1-2 .en-video-module,
.video-1-2 .en-video-module .en-video-module-title,
.video-1-2 .en-video-module .en-video-module-title a,
.video-1-2 .en-video-module .videoTitle {
    background-color: var(--layout-2-background-color);
}


@media (min-width: 700px) {

    /* Layout 1 END*/
    /*
       video-1-2 LAYOUT 2
    */
    .video-1-2 .en-video-module {
        grid-template-areas: "module-title video" "video-title video";
        grid-template-columns: 240px 440px;
        align-items: center;
        width: 680px;
    }

    .video-1-2 .en-video-module .video-player {
        width: 440px;
    }

    .video-1-2 .en-video-module .en-video-module-title {
        text-align: center;
        padding-inline: 20px;
    }


    .video-1-2 .en-video-module .videoTitle {
        padding-inline: 20px;
        text-align: center;
    }

}