#links-wrapper {
    background: radial-gradient(var(--theme-color-1), var(--theme-color-8));
    animation-name: fade-in-from-background;
    animation-duration: 400ms;
    animation-fill-mode: backwards;
}

.link-card {
    position: relative;
    float: left;
    animation-name: shift-in-from-right;
    animation-duration: 300ms;
    animation-direction: forwards;
    animation-fill-mode: backwards;
    width: 30%;
    aspect-ratio: 3/1;
    box-shadow: 1px 1px 15px var(--theme-color-2);
    /* margin: 20px; */
    margin-bottom: 80px;
}
.link-card:hover {
    scale: 1.05;
}

.link-card:nth-child(1) { animation-delay: 300ms; }
.link-card:nth-child(2) { animation-delay: 400ms; }
.link-card:nth-child(3) { animation-delay: 500ms; }
.link-card:nth-child(4) { animation-delay: 350ms; }
.link-card:nth-child(5) { animation-delay: 450ms; }
.link-card:nth-child(6) { animation-delay: 550ms; }

.link-card .card2 {
    padding: 0;
    overflow: hidden;
}

.link-card .title {
    position: absolute;
    bottom: -60px;
    left: 50%;
    margin: 0 auto;
    color: black;
    background: none;
    filter: drop-shadow(1px 1px 10px var(--card-color-5));
    transform: translate(-50%, -50%);
    cursor: pointer;
    white-space: nowrap;
    font-size: 1.25em;
}

.link-card img {
    min-height: 100%;
    min-width: 100%;
    aspect-ratio: from-image;
    object-fit: cover;
    padding: 0;
    margin: 0;
}


@media only screen and (max-width: 991px) {
    .link-card {
        width: 150px;
        aspect-ratio: 1/3;
        margin-bottom: 40px;
    }
    .link-card:hover {
        scale: 1;
    }
    .link-card .title {
        font-size: small;
        bottom: -35px;
    }
}