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


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


.drs-list-01 {
    .container {
        text-align: center;
        h2 {
            font-size: 2em;
            margin-bottom: 20px;
        }
        > span {
            display: block;
            padding: 0 15%;
            font-size: 1.2em;
            color: ~"@{textoHtml}CC";
        }
        > hr {
            border: none;
            border-top: 1px solid #1238;
            width: 200px;
            margin: 40px auto;
        }
        .list-01-itens {
            .grid(1fr 1fr 1fr; 40px; start);
            margin-top: 50px;
            text-align: left;
            > div {
                .grid(auto 1fr; 15px; stretch);
                height: 100%;
                strong {
                    display: block;
                    font-size: 1.2em;
                    margin-bottom: 10px;
                }
                span {
                    .flex();
                    justify-content: center;
                    width: 38px;
                    height: 38px;
                    background: #123;
                    color: #FFF;
                    font-size: 1.1em;
                    border-radius: 20px;
                }
                p {
                    color: ~"@{textoHtml}CC";
                }
            }
        }
    }
}

@media screen and ( max-width: 1200px ){
    .drs-list-01 .container {
        > span {
            padding: 0 5vw;
        }
    }
}

@media screen and ( max-width: 950px ){
    .drs-list-01 .container {
        .list-01-itens {
            .grid(1fr 1fr; 20px; start);
        }
    }
}

@media screen and ( max-width: 750px ){
    .drs-list-01 .container {
        h2 {
            font-size: 1.8em;
        }
        > span {
            padding: 0;
            color: ~"@{textoHtml}DD";
        }
        > hr {
            opacity: 0;
            margin: 0px;
        }
        .list-01-itens {
            display: block;
            > div {
                &:not(:last-child) {
                    margin-bottom: 20px;
                }
            }
        }
    }
}