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


.drs-about-03 {
    * { .fx(); }
    .grid {
        .grid(1fr 1.8fr; 30px; start);
        grid-template-rows: auto 1fr;
        grid-template-areas: "img pge" "img lnk";
        &:not(:last-child) {
            margin-bottom: 30px;
            padding-bottom: 30px;
            border-bottom: 1px solid #1231;
        }
        margin-top: 20px;
        img {
            display: block;
            width: 100%;
            min-width: 300px;
            min-height: 170px;
            object-fit: cover;
            border-radius: 3px;
            grid-area: img;
        }
        .paragraph-generate {
            text-align: left;
            font-size: 1.1em;
            color: ~"@{textoHtml}DD";
            grid-area: pge;
            margin-top: -10px;
            p {
                line-height: 24px;
            }
        }
        .links {
            .grid(1fr 1fr; 1px 10px);
            grid-auto-flow: column;
            padding-left: 10px;
            grid-area: lnk;
            margin-top: -10px;
            a {
                display: block;
                padding-left: 23px;
                position: relative;
                margin: 4px;
                &:hover:before {
                    border-color: transparent transparent transparent @corLinkHover;
                }
                &:before {
                    content: "";
                    position: absolute;
                    border-width: 5px 8px;
                    border-style: solid;
                    border-color: transparent transparent transparent @corLink;
                    left: 8px;
                    top: 4px;

                }
            }
        }
    }
}

@media screen and ( max-width: 1000px ){
    .drs-about-03 {
        .grid {
            grid-template-areas: "img pge" "lnk lnk";
            &:not(:last-child) {
                padding-bottom: 20px;
            }
        }
    }
}

@media screen and ( max-width: 700px ){
   .drs-about-03 {
        .grid {
            .grid(1fr; 10px;);
            grid-template-areas: "img" "pge" "lnk";
            .paragraph-generate {
                margin-top: -50px;
                h3 {
                    display: inline-block;
                    padding: 5px 20px;
                    background: #F8F8F8;
                    margin-left: 15px;
                }
            }
            .links {
                padding-left: 0;
                margin-top: 0;
            }
        }
    }
}

@media screen and ( max-width: 500px ){
   .drs-about-03 {
        .grid {
            .links {
                display: block;
                a {
                    margin: 5px;
                }
            }
        }
    }
}