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


.drs-card-03 {
    .grid {
        .grid(1fr 1fr; 10px; stretch;);
        a {
            .grid(1fr 1fr; 0);
            font-size: 1.1em;
            color: #123;
            text-decoration: none;
            min-height: 150px;
            position: relative;
            overflow: hidden;
            .fx();
            div {
                grid-area: d;
                position: relative;
                img {
                    display: block;
                    width: 100%;
                    filter: brightness(40%);
                    object-fit: cover;
                    .fx();
                }
                span {
                    position: absolute;
                    width: 100%;
                    top: calc(50% - 15px);
                    text-align: center;
                    color: #FFF;
                    font-size: 1.3em;
                }
            }
            p {
                .flex();
                grid-area: p;
                padding: 8% 15%;
                height: 100%;
                position: relative;
                font-size: .9em;
                background: #FFFFFF;
            }
            &:hover {
                div img {
                    transform: scale(105%);
                    filter: brightness(50%);
                }
                p {
                    text-decoration: underline;
                }
            }
            &:nth-child(2n + 1) {
                grid-template-areas: "d p";
                overflow: hidden;
                border-radius: 100px 0 0 100px;
                div {
                    span {
                        padding-right: 15%;
                    }
                }
                p {
                    border-radius: 100px 0 0 100px;
                    margin-left: -90px;
                }
                &:first-child {
                    border-radius: 100px 50px 0 100px;
                }
                &:nth-last-child(2) {
                    border-radius: 100px 0 50px 100px;
                }
            }
            &:nth-child(2n + 2) {
                grid-template-areas: "p d";
                overflow: hidden;
                border-radius: 0 100px 100px 0;
                div span {
                    padding-left: 15%;
                }
                p {
                    border-radius: 0 100px 100px 0;
                    margin-right: -90px;
                }
                &:nth-child(2) {
                    border-radius: 50px 100px 100px 0;
                }
                &:nth-last-child(1) {
                    border-radius: 0 100px 100px 50px;
                }
            }
        }
    }
}


@media screen and ( max-width: 1200px ){
    .drs-card-03 .grid {
        a {
            font-size: 1.2em;
            p {
                font-size: .8em;
                text-align: center;
            }
            &:nth-child(2n + 1) {
                .grid(260px 1fr; 0);
                border-radius: 10px 0 0 10px;
                div span {
                    padding-right: 35%;
                    font-size: 1.1em;
                }
                &:first-child {
                    border-radius: 10px 50px 0 10px;
                }
                &:nth-last-child(2) {
                    border-radius: 10px 0 50px 10px;
                }
            }
            &:nth-child(2n + 2) {
                .grid(1fr 260px; 0);
                border-radius: 0 10px 10px 0;
                div span {
                    padding-left: 35%;
                    font-size: 1.1em;
                }
                &:nth-child(2) {
                    border-radius: 50px 10px 10px 0;
                }
                &:nth-last-child(1) {
                    border-radius: 0 10px 10px 50px;
                }
            }
        }
    }
}

@media screen and ( max-width: 900px ){
    .drs-card-03 .grid {
        .grid(1fr;);
        a {
            min-height: 120px;
            font-size: 1.4em;
            &:nth-child(2n + 1) {
                border-radius: 10px;
                div span {
                    padding-right: 32%;
                }
                &:first-child,
                &:nth-last-child(2) {
                    border-radius: 10px;
                }
                p {
                    background: #FFF;
                    border: 1px solid #1231;
                }
            }
            &:nth-child(2n + 2) {
                border-radius: 10px;
                div span {
                    padding-left: 32%;
                }
                &:nth-child(2),
                &:nth-last-child(1) {
                    border-radius: 10px;
                }
                p {
                    background: #FFF;
                    border: 1px solid #1231;
                }
            }
        }
    }
}

@media screen and ( max-width: 600px ){
    .drs-card-03 .grid {
        .grid(1fr; 20px;);
        a {
            display: block;
            background: #6781;
            box-shadow: 0 5px 5px -5px #000;
            &:nth-child(2n + 1), &:nth-child(2n + 2) {
                display: block;
                div {
                    max-height: 95px;
                    img {
                        height: 95px;
                        width: 100%;
                        object-fit: cover;
                    }
                    span {
                        padding: 0;
                    }
                }
                p {
                    display: block;
                    margin: 0;
                    font-size: .8em;
                    border-radius: 0;
                    background: none;
                    padding: 10px;
                    text-align: center;
                    background: #FFF;
                }
            }
        }
    }
}

@media screen and ( max-width: 450px ){
    .drs-card-03 .grid {
        padding-right: 10px;
        padding-left: 10px;
        a {
            &:nth-child(2n + 1), &:nth-child(2n + 2) {
                div {
                    img {
                        min-width: 450px;
                        display: block;
                        object-fit: cover;
                    }
                }
                p {
                    padding: 20px;
                    font-size: .9em;
                }
            }
        }
    }
}