div .tag-datum   { grid-area: tag-datum; }
div .monat-datum { grid-area: monat-datum; }
div .tag         { grid-area: tag; }
div .uhrzeit     { grid-area: uhrzeit; }
div .ort         { grid-area: ort; }
div .tickets     { grid-area: tickets; }
div .titel1      { grid-area: titel1; }
div .titel2      { grid-area: titel2; }
div .img         { grid-area: img; }

div.termin {
    margin-top: 10px;

    display: grid;

    grid-template-columns: 15% 30% 30% 25%;
    grid-template-areas: 
        'tag           img titel1 ort'
        'tag-datum     img titel2 ort'
        'monat-datum   img titel2 tickets'
        'uhrzeit       img titel2 tickets';

    /* column-gap: 0.2em; */

    background-color: rgba(0, 0, 0, 0.24);
}

div.termin > div {
    padding: 0 4px;
}
div.termin > div.img {
    padding: 4px;
}

div.termin .tag { font-weight: normal; }
div.termin .tag-datum { font-size: xx-large; font-weight: bold; }
div.termin .monat-datum { font-weight: bold; }

div.termin .tag-datum,
div.termin .monat-datum,
div.termin .tag,
div.termin .uhrzeit {
    text-align: center;
}

div.termin div { 
    hyphens: none;
}

div.termin div.img { 
    max-height: 100%;
}

div.termin div.img img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

div.termin div.ort img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

@media screen and (max-width: 640px), screen and (hover: none) {
    
    div.termin {
        grid-template-columns: 35% 65%;
        grid-template-areas: 
            'tag           img'
            'tag-datum     img'
            'monat-datum   img'
            'uhrzeit       img'
            'ort           img'
            'ort           titel1'
            'ort           titel2'
            'tickets       titel2';
    }

    div.termin .ort,
    div.termin .tickets {
        text-align: center;
    }

}