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


.drs-publication-04 {
    * { .fx(); }
    position: relative;
    overflow: hidden;
    font-size: 1.1em;
    .grid {
        .grid(200px 1fr; 0 20px; start);
        grid-template-areas: "a h" "a d";
        grid-template-rows: auto 1fr;
        > a {
            display: block;
            grid-area: a;
            img {
                display: block;
                width: 100%;
                border-radius: 3px;
            }
            &:hover {
                img {
                    transform: scale(103%);
                }
            }
        }
        h4 {
            font-size: 1.4em;
            margin-bottom: 5px;
            grid-area: h;
        }
        > div {
            grid-area: d;
            .paragraph-generate {
                padding: 20px 0;
                color: ~"@{textoHtml}AA";
            }
            .button {
                &.btn-acessar {
                    .botao(@fundoTopo1);
                }
                &.btn-todos {
                    .botao(@fundoTopo2);
                }
            }
        }
    }
}

@media screen and ( max-width: 900px ){
    .drs-publication-04 {
        font-size: 1em;
    }
}

@media screen and ( max-width: 750px ){
    .drs-publication-04 {
        text-align: center;
        .grid {
            .grid(1fr; 20px; start);
            grid-template-areas: "h" "a" "d";
            grid-template-rows: 1fr;
            > a {
                max-width: 250px;
                margin: 0 auto -10px auto;
            }
        }
    }
}