.why_we_exist
{
    margin-top: var(--sz_button_margin);
    display: grid;
    position: relative;
    grid-gap: var(--sz_button_margin);
    grid-template-columns: 1fr 1fr;
    background-color: var(--color_primary_light);
    border-radius: var(--sz_button_margin);
    padding: var(--sz_button_margin);
}

    .why_we_exist > :first-child
    {
        padding-top: calc(2 * var(--sz_button_margin) );
    }

    .why_we_exist > .apprenticeship_areas
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: calc(3 * var(--sz_button_margin) );
    }
        .why_we_exist > .apprenticeship_areas > div
        {
            display: inline-flex;
            position: relative;
            align-items: flex-end;
            justify-content: center;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
            border: var(--border);
            border-radius: var(--sz_button_margin);
            padding: var(--sz_button_margin);
        }
            .why_we_exist > .apprenticeship_areas > div:before
            {
                content: "";
                display: block;
                position: absolute;
                top: var(--sz_button_margin);
                left: 50%;
                transform: translateX(-50%);
                width: calc(1.5 * var(--sz_button) );
                height: calc(1.5 * var(--sz_button) );
                background-position: center center;
                background-size: contain;
                background-repeat: no-repeat;
            }
                .why_we_exist > .apprenticeship_areas > div.energy_infrastructure:before
                {
                    background-image: url(icons/powerlines.svg);
                }
                .why_we_exist > .apprenticeship_areas > div.ai_digital_infrastructure:before
                {
                    background-image: url(icons/infrastructure.svg);
                }
                .why_we_exist > .apprenticeship_areas > div.advanced_manufacturing:before
                {
                    background-image: url(icons/manufacturing.svg);
                }
                .why_we_exist > .apprenticeship_areas > div.construction_trades:before
                {
                    background-image: url(icons/construction.svg);
                }

/********************* Start Media queries for different layouts */
@media screen and (max-width: 768px)
{
    .why_we_exist
    {
        grid-template-columns: 1fr;
    }
    .why_we_exist > .apprenticeship_areas
    {
        min-height: 300px;
    }
}