﻿.link-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 2.5rem 0 2.5rem;

    @media screen and (width <= 600px) {
        padding: 0;
    }
}

.link-container:last-of-type {
    padding: 0 2.5rem 1.5rem 2.5rem;

    @media screen and (width <= 600px) {
        padding: 0 0 1rem;
    }
}

.link-tile {
    flex: 1 0 25rem;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0 5rem 0.75rem 5rem;
    transition: transform 0.3s ease-in-out;
    font-size: 1.2rem;

    @media screen and (width <= 600px) {
        flex: 1 0 15rem;
        padding: 0 1rem 0.75rem 1rem;
        font-size: 1rem;
    }
}

    .link-tile > .info-links {
        display: flex;
        padding: .75rem 0 0 0;

        > .header {
            flex-grow: 1;
            flex-basis: 1px;
            min-height: 1rem;
            align-content: center;
            color: #1f1b50;
            font-size:1.40rem;
        }
        h3
        {
            margin:0.5rem 0;
        }
        > .link {
            flex-grow: 1;
            flex-basis: 1px;
            min-height: 0.5rem;
            align-content: center;
            background: #1f1b50;
            color: #fff;
            border-radius: 10px;
            @media screen and (width <= 600px) {
                padding-left: 1rem;
            }
        }

            > .link:hover {
                background: #a2a2a2;
            }

        > div > p {
            min-width: 15rem;
            text-wrap: nowrap;
        }

        > div > img {
            height: 2rem;
        }

        > div > a {
            display: block;
            text-decoration: none;
            color: #fff;
            font-size: 1.1em;
        }

            > div > a:visited {
                color: #a3a3a3;
            }
    }