.link_row
{
    display: grid;
    grid-gap: var(--sz_button_margin);
    width: 90%;
    margin-top: var(--sz_button);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--sz_button_margin);
    box-sizing: border-box;
}
    .link_row > a
    {
        position: relative;
        padding: var(--sz_button_margin);
        padding-left: calc(3 * var(--sz_button));
        padding-right: calc(1 * var(--sz_button));
        border: 1px solid silver;
        border-radius: calc(1 * var(--sz_button_margin));
        background-size: 40px;
        background-repeat: no-repeat;
        background-position: center var(--sz_button_margin);
        text-decoration: none;
        color: black;
    }
        .link_row > a:hover
        {
            background-color: var(--color_primary);
            color: white;
        }
            .link_row > a:hover:before
            {
                background-color: white;
            }
        .link_row > a:before
        {
            content: "";
            display: block;
            height:calc(2 * var(--sz_button));
            width: calc(2 * var(--sz_button));
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            position: absolute;
            left: var(--sz_button_margin);
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--color_primary_light);
            border-radius: 50%;
        }
        .link_row > a:after
        {
            content: "→";
            display: block;
            position: absolute;
            top: 50%;
            right: calc(1 * var(--sz_button_margin));
            font-weight: bold;
        }

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

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

}

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

}

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