a:hover {
    text-decoration: none;
}

.progress-bar {
    background-color: #5ac8fb;
    color: #212529;
    font-weight: bold;
}

.progress {
    background-color: white;
}

.showOnHover {
    display: none;
}

.progress:hover .showOnHover {
    display: block !important;
}

.grid-container {
    display: grid;
}

.grid-item {
    padding: 10px 0;
}

.progress {
    height: 35px;
}

.rounded {
    border-radius: var(--borderRadius-standard) !important;
}

#instafeed-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    /*margin: 10px;*/
    max-height: 220px;
    border-radius: var(--borderRadius-standard) !important;
}

@media only screen and (max-width: 576px) {
    #instafeed-container img {
        max-height: 150px;
    }
}


    #instafeed-container > a {
        flex: 0 0 25%;
        max-width: 25%;
        padding: 1rem;
    }

    #instafeed-container a:nth-child(n+5) {
        display: none !important;
    }


    @media only screen and (max-width: 768px) {
        #instafeed-container > a {
            flex: 0 0 50%;
            max-width: 50%;
            padding: .5rem;
        }
    }

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* mirrors col-6 */
    gap: 1rem; /* replaces my-2/mx-3 spacing */
    margin-bottom: 1rem; /* mirrors mb-3 on .row */
    padding-left: 1rem; /* mirrors mx-3 on mobile edges */
    padding-right: 1rem;
}

@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr); /* mirrors col-md-6 */
        gap: 1.5rem; /* mirrors Bootstrap's default gutter */
        padding-left: 0; /* mirrors mx-md-0 */
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr); /* mirrors col-lg-4 */
    }
}

.grid-item {
    min-width: 0; /* prevents grid items from overflowing with long text/ellipsis */
    height: 100%;
}

    .grid-item .mainLink {
        height: 100%; /* fill the grid-item */
    }