html {
    font-family: Helvetica, sans-serif;
}

body {
    margin: 0;
    padding: 0;
}

.container {
    min-height: 100vh;
    padding-left: 50px;
    padding-right: 50px;
    display: flex;
}

.body {
    max-width: 1462px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.body > * {
    margin: 0 auto;
    flex: 0 0 200px;
    height: 281px;
    color: inherit;
    text-decoration: none;
}

h2 {
    vertical-align: middle;
    flex: 0 0 100%;
}

.cardGrid {
    margin: auto;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    transition: 0.5s ease;
    cursor: pointer;
}

.cardImage {
    height: 180px;
    display: flex;
    align-content: center;
    justify-content: center;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    margin: 10px;
}

.cardText {
    height: 80px;
    width: 200px;
    display: flex;
    margin: auto;
    text-align: center;
    font-size: 14px;
    border-top: solid 1px #ddd;
}

.cardGrid:hover {
    transform: scale(1.2);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
}

.card1 > .cardImage {
    background: url(images/outlook.svg);
    background-size: cover;
}

.card2 > .cardImage {
    background: url(images/share.svg);
    background-size: cover;
}

.card3 > .cardImage {
    background: url(images/halbleiterRiseTec.svg);
    background-size: cover;
}

.card4 > .cardImage {
    background: url(images/buerobedarf.svg);
    background-size: cover;
}

.card5 > .cardImage {
    background: url(images/intranet.svg);
    background-size: cover;
}

.card6 > .cardImage {
    background: url(images/leichteSprache.png);
    background-size: cover;
}

.card7 > .cardImage {
    background: url(images/businessDrive.svg);
    background-size: cover;
}

.card8 > .cardImage {
    background: url(images/pep.svg);
    background-size: cover;
}

.card9 > .cardImage {
    background: url(images/pepWeb.svg);
    background-size: cover;
}

.card10 > .cardImage {
    background: url(images/lh-logo-ohne-welle-zentriert.png);
    background-size: contain;
	background-repeat: no-repeat;
    background-position: center;
}

.card11 > .cardImage {
    background: url(images/google.svg);
    background-size: cover;
}

.card12 > .cardImage {
    background: url(images/trello240.svg);
    background-size: cover;
}

.card13 > .cardImage {
    background: url(images/icons8-bakterien.svg);
    background-size: cover;
}

.card14 > .cardImage {
    background: url(images/icons8-aufgabe.svg);
    background-size: cover;
}

.card15 > .cardImage {
    background: url(images/icons8-nachrichten.svg);
    background-size: cover;
}


.card16 > .cardImage {
    background: url(images/icons8-archiv.svg);
    background-size: cover;
}

.card17 > .cardImage {
    background: url(images/docuware.png);
    background-size: cover;
}

.card18 > .cardImage {
    background: url(images/digital_illustration.svg);
    background-size: cover;
}

.card19 > .cardImage {
    background: url(images/icons8-geschaeft.svg);
    background-size: cover;
}

.card20 > .cardImage {
    background: url(images/connext_vivendi.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: 63CAE1;
}

.card21 > .cardImage {
    background: url(images/icons8-euro-preisschild.svg);
    background-size: cover;
}

.card22 > .cardImage {
    background: url(images/reiniger.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card23 > .cardImage {
    background: url(images/icons8-iphone.svg);
    background-size: cover;
}

.card24 > .cardImage {
    background: url(images/icons8-einkaufskorb.svg);
    background-size: cover;
}

.card25 > .cardImage {
    background: url(images/transgourmet.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card26 > .cardImage {
    background: url(images/apetito.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card27 > .cardImage {
    background: url(images/detailansicht.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card28 > .cardImage {
    background: url(images/pep2.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.card29 > .cardImage {
    background: url(images/buch_blau.svg);
    background-size: cover;
}

.card30 > .cardImage {
    background: url(images/icons8-vertikale-zeitleiste.svg);
    background-size: cover;
}

.card31 > .cardImage {
    background: url(images/sofia_neu.png);
	background-size: cover;
}

.card32 > .cardImage {
    background: url(images/office.png);
    background-size: cover;
}

.card33 > .cardImage {
    background: url(images/teams.png);
    background-size: cover;
}

.card34 > .cardImage {
    background: url(images/quotenrechner_icon_final.png);
    background-size: cover;
}
	
@media only screen and (max-width: 1550px) {
    .container {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media only screen and (max-height: 1000px) {
    .container {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}