@import '../functions.less';
@import '../../../../files/config/colors.less';


.drs-video-02 {
    * { .fx(); }
    margin: 0 auto;
    .container {
        iframe {
            display: block;
            max-width: 850px;
            width: 100%;
            margin: 0 auto;
            border-radius: 5px;
            margin-top: 25px;
            background: #FBFBFB;
        }
        &.grid {
            .grid(3fr 2fr; 20px; start);
            grid-template-areas: "if h4" "if pg";
            grid-template-rows: auto 1fr;
            iframe {
                grid-area: if;
            }
            h4 {
                font-size: 1.2em;
                margin: 20px 0;
                padding: 2px;
                grid-area: h4;
            }
            .paragraph-generate {
            	font-size: 1.1em;
                color: ~"@{textoHtml}DD";
                padding: 2px;
                grid-area: pg;
                p:not(:last-child) {
                	margin-bottom: 15px;
                }
            }
        }
    }
}

@media screen and ( max-width: 1000px ){
    .drs-video-02 {
        .grid {
            .grid(1fr; 5px);
            grid-template-areas: "if" "h4" "pg";
            max-width: 850px;
        }
    }
}

@media screen and ( max-width: 700px ){
    .drs-video-02 {
        .container.grid {
            .grid(1fr; 20px; start);
            grid-template-areas: "if" "h4" "pg";
            grid-template-rows: none;
        }
        .paragraph-generate {
            font-size: 1em;
        }
    }
}