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


.drs-card-06 {
    * { .fx(); }
    margin: 0 auto;
    .container {
        header {
            .grid(100px auto 1fr; 15px;);
            margin-bottom: 10px;
            font-size: 1.2em;
        }
        .grid {
            .grid(1fr; 15px;);
            margin-top: 30px;
            a {
                .grid(360px 1fr; 10px;);
                position: relative;
                text-decoration: none;
                color: #123;
                background: #7891;
                border-radius: 4px;
                img {
                    display: block;
                    width: 360px;
                    height: 180px;
                    object-fit: cover;
                    border-radius: 4px;
                    filter: brightness(80%);
                }
                label {
                    position: absolute;
                    text-align: center;
                    width: 55px;
                    padding: 0 5px 5px 5px;
                    background: #FFFE;
                    left: 5px;
                    top: 5px;
                    border-radius: 3px;
                    span {
                        display: block;
                        font-size: 2em;
                        margin-bottom: 5px;
                    }
                    p {
                        border-top: 1px solid #1238;
                        padding-top: 5px;
                        margin-top: -5px;
                    }
                }
                div {
                    padding: 5px 20px;
                    p {
                        &.titulo {
                            font-size: 1.3em;
                            padding: 10px 0 5px 0;
                        }
                        &.subtitulo {
                            opacity: 60%;
                            font-size: .9em;
                        }
                    }
                    span {
                        display: inline-block;
                        font-size: 13px;
                        background: linear-gradient(#1231, #1232);
                        padding: 3px 10px;
                        border-radius: 2px;
                    }
                }
                &:hover {
                    background: #1231;
                    img {
                        opacity: 80%;
                    }
                    .titulo {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

@media screen and ( max-width: 1100px ){
    .drs-card-06 {
        .container {
            .subtitulo {
                display: none;
            }
            .grid a {
                border: 1px solid #1231;
                box-shadow: 0 4px 4px -4px #000;
            }
        }
    }
}

@media screen and ( max-width: 900px ){
    .drs-card-06 {
        .container {
            header {
                .grid(50px auto 1fr; 15px;);
            }
            .grid {
                .grid(1fr 1fr; 20px; stretch);
                a {
                    .grid(1fr; 10px; start);
                    div p.titulo {
                        font-size: 1.15em;
                    }
                    img {
                        width: 100%;
                        height: 180px;
                    }
                }
            }
        }
    }
}

@media screen and ( max-width: 800px ){
    .drs-card-06 {
        .container {
            a {
                div p.titulo {
                    font-size: 1.1em;
                }
            }
        }
    }
}

@media screen and ( max-width: 580px ){
    .drs-card-06 {
        .container {
            header {
                .grid(auto 1fr; 15px);
                hr:first-child {
                    display: none;
                }
            }
            .grid {
                .grid(1fr; 20px; stretch);
                a {
                    background: #5671;
                    div {
                        padding: 5px 10px 15px 10px;
                        p.subtitulo {
                            display: block;
                            font-size: 14px;
                        }
                    }
                    img {
                        height: 100%;
                        max-height: 290px;
                    }
                }
            }
        }
    }
}