/**
*
* .c32
*  container and flexible amount of cards
*
**/

/*======= 320  padding l,r  15  = 290 ===*/

.c32 {
    text-align: center;
    margin-bottom: 2em;
    padding-bottom: 3em;
}

.c32.bottomLine {
    border-bottom: 1px solid var(--fontDarkBlue);
}

.c32 .top-article h2 {
    font-size: 2em;
}

/*cards*/


.c32 .img {
    margin-bottom: 1em;
}

.c32 .card h2 {
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 1.5em;
}

.c32 .card h3 {
    font-size: 19px;
    color: var(--fontDarkBlue);
    margin-top: 0;
    margin-bottom: 20px;
}

.c32 .container1, .c32 .container2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    align-items: stretch;
    /* makes all cards same height */
}

/* normal grid of cards - apply flex sizing to link wrappers (direct children)
   and keep the .card article for inner content/padding */
.c32 .card {
    margin-bottom: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(80% - 20px);
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* make links inside the card fill the card so the whole card is clickable */
.c32 .card > a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/*======= 576 ========= MEDIA QUERIES ======= border 15 = 546 ===*/

@media only screen and (min-width: 576px) {
        .c32 .card {
        flex-basis: calc(50% - 20px);
    }
}


/*======= 768 ========= MEDIA QUERIES ======= border 15 = 738 ===*/

@media only screen and (min-width: 768px) {
    .c32 .card {
        flex-basis: calc(33% - 20px);
    }

    .c32 .top-article h2 {
        font-size: 3em;
    }

    .c32 .top-article {
        margin-bottom: 4em;
    }
}


/*======= 990 ======== MEDIA QUERIES ======== border 15 = 960 ===*/

@media only screen and (min-width: 990px) {


.c32 .top-article {
    text-align: left;
    display: block;
    width: 70%;
    padding-left: 4%;
}


    .c32 .card {
        flex-basis: calc(25% - 20px);
    }
}

/*======= 1398 ======= MEDIA QUERIES ======== border 30 = 1338 ==*/

@media only screen and (min-width: 1398px) {}

/*======= 2512 ======= MEDIA QUERIES ==== border 151-45 = 2396 ==*/

@media only screen and (min-width: 2512px) {}

/*END.c32*/