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


.drs-numbering-01 {
   .grid(1fr 1fr 1fr 1fr 1fr 1fr; 10px; stretch);
    margin: 0 auto;
    &[itens="5"] { 
        .grid(1fr 1fr 1fr 1fr 1fr; 20px; stretch);
    }
    &[itens="4"] {
        .grid(1fr 1fr 1fr 1fr; 30px; stretch);
        max-width: 1200px;
    }
    &[itens="3"] {
        .grid(1fr 1fr 1fr; 30px; stretch);
        max-width: 900px;
    }
    &[itens="2"] {
        .grid(1fr 1fr; 30px; stretch);
        max-width: 650px;
    }
    &[itens="1"] {
        .grid(1fr); 
        max-width: 300px;
    }
    text-align: center;
    > * {
        background: #3451;
        padding: 20px;
        border-radius: 3px;
        box-shadow: 0 5px 5px -5px #1236;
        text-decoration: none;
        color: #234;
        img {
            display: block;
            margin: 0 auto;
            height: 70px;
        }
        span {
            font-size: 3em;
            display: block;
        }
        strong {
            font-size: 1.3em;
            display: block;
            margin-bottom: 10px;
        }
        p {
            font-size: .9em;
            opacity: 70%;
        }
    }
    > a {
        .fx(.2s);
        text-decoration: none;
        &:hover {
            box-shadow: 0 7px 7px -7px #000;
            transform: scale(102%);
            color: #123;
        }
    }
}

@media screen and ( max-width: 1450px ){
    .drs-numbering-01 {
        &[itens="5"], &[itens="6"] {
            .grid(1fr 1fr 1fr; 10px; stretch);
            > * {
                /* .grid(150px 1fr;);
               grid-template-areas: "img p" "span p" "strong p";
                img { grid-area: img; }
                span { grid-area: span; }
                strong { grid-area: strong; }
                p { grid-area: p; }*/
            }
        }
    }
}

@media screen and ( max-width: 900px ){
    .drs-numbering-01 {
        &[itens="4"], &[itens="5"], &[itens="6"] {
            .grid(1fr 1fr; 10px; stretch);
        }
        &[itens="3"] {
            .grid(1fr; 10px; stretch);
            > * {
                .grid(auto auto 1fr 2fr; 10px; center);
                img {
                    height: 50px;
                }
                span {
                    text-align: right;
                }
                strong, p {
                    text-align: left;
                }
            }
        }
    }
}

@media screen and ( max-width: 650px ){
    .drs-numbering-01 {
        &[itens="3"], &[itens="4"], &[itens="5"], &[itens="6"] {
            .grid(1fr; 10px; stretch);
            > * {
                display: block;
                img {
                    height: 70px;
                }
                span, strong, p {
                    text-align: center;
                }
            }
        }
        &[itens="2"] {
            .grid(1fr; 10px; stretch);
        }
    }
}