.card .it-ben {grid-area: ben; }
    .card .it-krd {grid-area: krd; }
    .card .it-bba {grid-area: bba; }
    .card .it-ane {grid-area: ane; }
    .card .it-dba {grid-area: dba; }
    .card .it-daa {grid-area: daa; }
    .card .it-amc {grid-area: amc; }
    .card .it-hla {grid-area: hla; }
    .card .it-dyi {grid-area: dyi; }
    .card .it-tze {grid-area: tze; }



.card {
    width: 100%;
    box-sizing: border-box;
    max-width: 1400px;
    --grid-pad: 12px;
    margin: auto auto 100px;
    display: grid;
    grid-gap: 4px;
    grid-template-columns: auto 190px 190px 190px 190px ;
    grid-template-areas:
                        'ben bba bba ane ane'
                        'ben dba dba daa daa'
                        'ben krd krd krd krd'
                        'ben amc hla dyi tze'
                        ;
    min-height: 500px;
    }

    @media (max-width: 1400px) {
        .card {
            grid-template-columns: 340px auto auto auto auto ;
            }
    }



    @media (max-width: 1100px) {
        .card {
            grid-template-columns: 50% auto;
            grid-template-areas:
                                'ben bba'
                                'ben dba'
                                'ben ane'
                                'ben daa'
                                'ben krd'
                                'amc hla'
                                'dyi tze'

                                ;
            }
    }


    @media (max-width: 800px) {
        .card {
            grid-template-columns: 320px auto auto auto auto;
            grid-template-areas:
                                'ben krd krd krd krd'
                                'ben bba bba ane ane'
                                'ben dba dba daa daa'
                                'ben amc amc dyi dyi'
                                'ben hla hla tze tze'
                                ;
            }
    }


    @media (max-width: 700px) {
        .card {
            grid-template-columns: 24% auto 24% auto;
            grid-template-areas:
                                'ben ben krd krd'
                                'ben ben bba bba'
                                'ben ben ane ane'
                                'dba dba daa daa'
                                'amc hla dyi tze'
                                ;
            }
    }


    @media (max-width: 600px) {
        .card {
            grid-template-areas:
                                'ben ben ben ben'
                                'bba bba ane ane'
                                'dba dba daa daa'
                                'krd krd krd krd'
                                'amc hla dyi tze'
                                ;
            }
    }


    @media (max-width: 400px) {
        .card {
            grid-template-columns: 48% auto;
            grid-template-areas:
                                'ben ben'
                                'bba ane'
                                'dba daa'
                                'krd krd'
                                'amc hla'
                                'dyi tze'
                                ;
            }
    }

    @media (max-width: 340px) {
        .card {
            grid-template-columns: auto;
            grid-template-areas:
                                'ben'
                                'bba'
                                'dba'
                                'ane'
                                'daa'
                                'krd'
                                'amc'
                                'hla'
                                'dyi'
                                'tze'
                                ;
            }
    }



    .card {
        color: #888;
        }

    .card a {
        color: #888;
        text-decoration: none;
        transition: all 200ms;
        }

    .card a:hover {
        color: #000;
        }

    .card-itm {
        background-color: rgba(255,255,255,1);
        font-size: var(--font-size);
        text-align: left;
        min-height: 60px;
        border-radius: 6px;
        position: relative;
        box-shadow: 0px 0px 4px rgba(0,0,0,.1);
        overflow: hidden;
        }

    .card-itm,
    .card-itm .layer {
        padding: 8px var(--grid-pad);
        }
    .card-itm .layer {
        margin: -8px calc(var(--grid-pad) * -1);
        background-color: rgba(100,100,100, .85);
        min-height: 200px;
        }


        .card ul {
            list-style-type: none;
            margin: 0 calc(var(--grid-pad) * -1) 0;
            }

            .card ul li {
                border-bottom: 1px dotted #ddd;
                }

            .card ul li:last-child {
                border-bottom: 0;
                }

            .card ul li a {
                display: block;
                padding: 7px var(--grid-pad);
                overflow: hidden;
                }

            .card ul li a:hover {
                background: #eee;
                color: #222;
                }

            .card .childbox {
                background: rgba(0,0,0,.1);
                width: 200px;
                float: right;
                margin: 10px;
                padding: var(--grid-pad);
                border-radius: 10px;
                }

/*
    .card-itm i.love {color: #ecc1d0;}
    .card .it-ben i.love {color: rgba(236,190,208,.7);}
*/
    .card .it-ben {
                background: none center center transparent;
                background-size: cover;

                }

    .card .it-ben[data-gender="m"] .layer {background-color: rgb(var(--m-rgb), .85);}
    .card .it-ben[data-gender="w"] .layer {background-color: rgb(var(--w-rgb), .85);}


    .card .it-ben {color: #fff;}
    .card .it-ben a {color: rgba(255,255,255,.6);}

    .card .it-ben h1,
    .card .it-ben h2,
    .card .it-ben h3 {color: rgba(255,255,255,1);}


    .card .it-ben h1 {
                    text-shadow: 1px 1px 0px rgba(0,0,0,.2);
                    margin-right: 40px ;
                    }

    .card .it-ben ul li {border-bottom: 1px dotted rgba(255,255,255,.2);}
    .card .it-ben ul li a:hover {background-color: rgba(255,255,255,.2);color: #fff;}

    .card .it-bba h2,
    .card .it-amc h3,
    .card .it-dyi h3 {color: rgb(var(--m-rgb));}

    .card .it-ane h2,
    .card .it-hla h3,
    .card .it-tze h3 {color: rgb(var(--w-rgb));}

    .card .it-amc ul,
    .card .it-dyi ul,
    .card .it-hla ul,
    .card .it-tze ul {font-size: 80%;}


    .card .it-ben .layer {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        }


        .card .it-krd ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
            list-style-type: none;
            margin: 0 calc(var(--grid-pad) * -1) 0;
            }

            .card .it-krd ul li {
                flex: auto;
                min-width: 140px;
                border:0;
                }



    .card .it-bba,
    .card .it-dba {
        text-align: right;
        }