.contact-card-list {
    display: flex;
    padding: 0;
    gap: 15px;
    flex-wrap: wrap;
    max-width: 100%;
}

.contact-card {
    list-style: none;
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    overflow: hidden;

    width: 300px;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
    position: relative;
}
@media screen and (max-width: 350px) {
    .contact-card {
        width: 100%;
    }
}

.contact-card :is(a, a:visited) {
    color: white;
    text-decoration: none;
}


.contact-card__link {
    height: 100%;
    display: grid;
    grid: 
        "photo" 1fr
        "name" 3em
        / auto;
    
    overflow: hidden;
    justify-items: center;
    align-items: center;
}

.contact-card__photo {
    grid-area: photo;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.contact-card__name-container {
    grid-area: name;
    background: linear-gradient(to right, rgb(18 55 97) 0%, rgb(53 148 255) 100%);
    color: white;
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}