.grindr-card-container {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr);
    grid-template-rows: auto;
    margin: 1.5rem -2.5rem;
    
    a.grindr-card {
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: flex-end;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        overflow: hidden;
        text-decoration: none;
        box-shadow: inset 0 -60px 30px -30px #000000cc;

        .name {
            width: 100%;
            padding: 0.5rem;
            color: white;
            font-size: 1rem;

            .confirmed {
                display: inline-block;
                width: 0.7rem;
                height: 0.7rem;
                border-radius: 50%;
                background-color: var(--grindr-green);
                margin-right: 0.4rem;
            }   
        }

        @media (max-width: 550px) {
            .name {
                font-size: 0.9rem;
                padding: 0.4rem;

                .confirmed {
                    width: 0.6rem;
                    height: 0.6rem;
                }
            }
        }

        @media (max-width: 400px) {
            .name {
                font-size: 0.8rem;
                padding: 0.3rem;

                .confirmed {
                    width: 0.5rem;
                    height: 0.5rem;
                }
            }
        }
    }

    a.grindr-card:hover {
        box-shadow: none;
            
        .name {
            text-shadow: 0px 0px 5px #000;
        }
    }
}
@media (max-width: 700px) {
    .grindr-card-container {
        margin: 1rem -1.5rem;
    }
}

.navigation-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}