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


.drs-publication-01 {
    .grid {
        .grid(1fr auto; 10px 40px; start);
        grid-template-areas: "h2 d2" "d1 d2";
        grid-template-rows: 50px;
        border-radius: 3px;
        h2 {
            grid-area: h2;
            font-size: 2em;
            margin-bottom: 30px;
        }
        > div {
            grid-area: d1;
            position: relative;
            &.desc {
                p {
                    margin-bottom: 20px;
                    opacity: 80%;
                }
                a {
                    .botao(@fundoBotao; @textoBotao);
                }
            }
            &.images {
                grid-area: d2;
            }
        }
    }
    &[itens="3"] .grid .images {
        .grid(1fr 1fr 1fr; 15px);
    }
    &[itens="2"] .grid .images {
        .grid(1fr 1fr; 20px);
    }
    &[itens="1"] .grid .images {
        .grid(1fr; 10px);
    }
}

@media screen and ( max-width: 1200px ){
    .drs-publication-01 .grid {
        .grid(1fr 200px; 0 40px; start);
        > div {
            &:last-child {
                img {
                    float: left;
                    top: 0;
                    position: relative;
                    &:nth-child(1) {
                        z-index: 3;
                        margin: 40px 0 0 0;
                    }
                    &:nth-child(2) {
                        margin: -5px 0 0 -119px;
                        z-index: 2;
                    }
                    &:nth-child(3) {
                        margin: -40px 0 0 -120px;
                        z-index: 1;
                    }
                }
            }
        }
    }
}

@media screen and ( max-width: 650px ){
    .drs-publication-01 .grid {
        .grid(1fr; 30px);
        grid-template-areas: "h2" "d2" "d1";
        box-shadow: 0 5px 5px -5px #000;
        h2 {
            margin: 10px 0 0 0;
        }
        > div {
            &.images {
                img {
                    float: none;
                    width: 100%;
                    height: auto;
                    &:nth-child(1) {
                        margin: 0;
                    }
                    &:nth-child(2) {
                        margin: 0;
                    }
                    &:nth-child(3) {
                        margin: 0;
                    }
                }
            }
        }
    }
}