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


.drs-card-07 {
    * { .fx(); }
    .grid {
        &[itens="8"], &[itens="7"] { 
            .grid(1fr 1fr 1fr 1fr; 10px; stretch);
        }
        &[itens="6"] { 
            .grid(1fr 1fr 1fr 1fr; 10px; stretch);
        }
        &[itens="5"] { 
            .grid(1fr 1fr 1fr 1fr 1fr; 10px; stretch);
        }
        &[itens="4"] {
            .grid(1fr 1fr 1fr 1fr; 10px; stretch);
            max-width: 1200px;
        }
        &[itens="3"] {
            .grid(1fr 1fr 1fr; 10px; stretch);
            max-width: 900px;
        }
        &[itens="2"] {
            .grid(1fr 1fr; 10px; stretch);
            max-width: 650px;
        }
        &[itens="1"] {
            .grid(1fr; 10px); 
            max-width: 300px;
        }
        a {
            .flex();
            padding: 10px;
            text-align: center;
            font-size: 1.3em;
            border-radius: 5px;
            min-height: 160px;
            box-shadow: 0 5px 5px -5px #333;
            div {
                width: 100%;
                img {
                    display: block;
                    margin: 0 auto 7px auto;
                }
                span {
                    color: #FFF;
                }
            }
            &:hover {
                opacity: 90%;
                transform: scale(103%);
                box-shadow: 0 7px 7px -7px #000;
            }
        }
    }
}

@media screen and ( max-width: 1450px ){
    .drs-card-07 .grid {
        &[itens="5"], &[itens="6"] {
            .grid(1fr 1fr 1fr; 10px; stretch);
        }
    }
}

@media screen and ( max-width: 1000px ){
    .drs-card-07 .grid {
        &[itens="7"], &[itens="8"] {
            .grid(1fr 1fr 1fr; 10px);
        }
    }
}

@media screen and ( max-width: 900px ){
    .drs-card-07 .grid {
        &[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: 800px ){
    .drs-card-07 .grid {
        &[itens="7"], &[itens="8"] {
            .grid(1fr 1fr; 10px);
        }
    }
}

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