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

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

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

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

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


.c50 article {
    margin-bottom: 2em;
}

/*cards*/

.c50 .card {
    margin-bottom: 2em;
}

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


.c50 .container {
    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 */
.c50 .card {
    margin-bottom: 2em;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(80% - 20px);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

/* make links inside the card fill the card so the whole card is clickable */
.c50 .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) {
        .c50 .card {
        flex-basis: calc(50% - 20px);
    }
}


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

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

    .c50 figcaption {
        text-align: left;
    }

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

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


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

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


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


    .c50 .card {
        flex-basis: calc(20% - 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.c50*/