.six_up
{
    display: grid;
    position: relative;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: var(--sz_button_margin);
    padding: var(--sz_button_margin);
    padding-top: calc(3 * var(--sz_button_margin));
}

    .six_up > div
    {
        position: relative;
        box-sizing: border-box;
        padding: var(--sz_button_margin);
        padding-top: calc(1.5 * var(--sz_button));
        border: var(--border);
        border-radius: var(--sz_button_margin);
        text-align: center;
    }
        .six_up > div:before
        {
            content: "";
            display: block;
            position: absolute;
            top: var(--sz_button_margin);
            left: 50%;
            transform: translateX(-50%);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            width: calc(1.5 * var(--sz_button));
            height: calc(1.5 * var(--sz_button));
        }
        .six_up > div > h4
        {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: var(--sz_button_margin);
        }
        .six_up > div > h4,
        .six_up > div > p
        {
            margin-bottom: 0;
        }

/********************* Start Media queries for different layouts */

@media screen and (max-width: 1200px)
{
}

@media screen and (max-width: 1024px)
{
    .six_up
    {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (max-width: 768px)
{
    .six_up
    {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 500px)
{
    .six_up
    {
        grid-template-columns: 1fr;
    }
}