
.apprenticeship_initiatives
{
    display: block;
    text-align: center;
    margin-top: var(--sz_button_margin);
    min-width: var(--sz_width_min);
}
    /* 2 columns */
    .apprenticeship_initiatives[data-layout="2"] { grid-template-columns: repeat(2, 1fr); }

.initiative_card
{
    display: inline-block;
    position: relative;
    padding: var(--sz_button_margin);
    box-sizing: border-box;
    border-radius: var(--sz_button_margin);
    width: calc(49% - (var(--sz_button_margin) / 2));
    text-align: left;
    vertical-align: top;
    border: 1px solid silver;
    margin-bottom: var(--sz_button_margin);
    background: #377CBE;
    background: linear-gradient(325deg, rgba(55, 124, 190, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 1) 100%);
}
    .initiative_card:nth-child(odd)
    {
        margin-right: 1%;
    }
    .initiative_card:before
    {
        content: attr(title);
        display: block;
        top: var(--sz_button_margin);
        color: var(--color_primary);
        font-weight: bold;
    }
        .initiative_card > h1,
        .initiative_card > p
        {
            display: block;
            width: 60%;
        }
        .initiative_card > h1
        {
            font-size: 1.5em;
        }
        .initiative_card > .image
        {
            display: block;
            position: absolute;
            width: 35%;
            height: 100px;
            right: var(--sz_button_margin);
            top: var(--sz_button_margin);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }
/* Individual card needs */
    .initiative_card.featured
    {
        background-color: black;
        color: white;
        background-image: url(/images/apprenticeship_initiative_featured.png);
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: right bottom;
        border: unset;
    }
        .initiative_card.featured .image
        {
            background-image: url(/images/logo_jff_white.png);
        }
    .initiative_card.acs_collaboration .image
    {
        background-image: url(/images/logo_acs_black.png);
        background-size: 100px;
    }
.initiative_card.jff_collaboration .image
    {
        background-image: url(/images/logo_jff_white.png);
    }
.initiative_card.gan_collaboration .image
    {
        background-image: url(/images/logo_gan_usa.png);
    }

/********************* Start Media queries for different layouts */

@media screen and (max-width: 1200px)
{
}

@media screen and (max-width: 1024px)
{
    .initiative_card
    {
        padding: calc(2 * var(--sz_button_margin));
        display: block;
        width: 100%;
    }
    .initiative_card.featured
    {
        background-size: 35%;
    }
        .initiative_card.featured .image
        {
            background-position: center center;
        }
        .initiative_card.gan_collaboration .image
        {
            background-size: 70%;
        }
}

@media screen and (max-width: 768px)
{
    .initiative_card
    {
        border-radius: 0;
        border: unset;
    }
        .initiative_card:not(.featured)
        {
            border-top: 1px solid silver;
        }
    .initiative_card p
    {
        width:90%;
        text-align: center;
    }
}
@media screen and (max-width: 500px)
{
    .initiative_card
    {
        border-radius: 0;
        border: unset;
    }
    .initiative_card:before
    {
        text-align: center;
    }
    .initiative_card:not(.featured)
    {
        border-top: 1px solid silver;
    }
    .initiative_card h1,
    .initiative_card p
    {
        width: 100%;
        text-align: center;
    }
    .initiative_card .image
    {
        display: block;
        position: relative;
        width: 100%;
        background-position: center center;
    }
    .initiative_card .button_row
    {
        justify-content: center;
    }
}