.art-wrapper {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 25%;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--alt-bg);
    background-image: url(/resources/media/star.svg);
    background-size: 45px 45px;

    animation: slide 100s linear infinite;
}

.art-wrapper a {
    color: var(--main-text);
    width: 100%;
    height: 100%;
}

.art-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: rgba(71, 3, 3, 0);
    box-shadow: 0 2px 2px 0 var(--dot-bg) inset,
    0 -2px 2px 0 var(--main-bg) inset;

    & .art-text {
        /*opacity: 0.5;*/
        clip-path: polygon(100% 0, 100% 0, 0 100%, 0 100%);
    }
}

.art-overlay:hover {
    & .art-text {
        opacity: 1;

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    background-color: rgba(71, 3, 3, 0.2);
}

.art-wrapper img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.art-wrapper, .art-wrapper img, .art-text, .art-overlay {
    border-radius: 10px;
    transition-property: clip-path, opacity, background-color, background;
    transition-timing-function: ease;
    transition-duration: 0.25s;
}

.art-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.art-text {
    width: 90%;
    height: 90%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border: 3px solid var(--high-text);
}

.art-title {
    font-size: 1.5rem;
    text-shadow: 0 0 15px var(--light-text);
    font-weight: 800;
}

.art-title:before {
    content: '✦ ';
}

.art-title:after {
    content: ' ✦';
}