.hover-glow { position: relative; }


.deck {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}
.deck-list {
    /* display: flex;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem;
}
.deck-set-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    padding: 1rem;
}
.card {
    position: relative;
    height: 6rem;
    width: 6rem;
    height: 40vmin;
    width: 40vmin;

    margin: 0 auto;

    border-radius: .5rem;
    overflow: hidden;

    box-shadow: 3vmin 3vmin 3vmin 0 #2229;
    box-shadow: 1vmin 2vmin 2vmin -1vmin #2229;
}
.hw12 { height: 12rem; width: 12rem; }
.h18w12 { height: 18rem; width: 12rem; }
.card-name {
    position: absolute;
    top: .25rem;
    padding: .25rem;
    /* left: .25rem; */

    width: max-content;
    left: 50%;
    transform: translateX(-50%);

    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 1px #2229;
}

.card-img {
    height: 100%; width: 100%;
    background-color: #888;
    --bgi: linear-gradient(-45deg, #123, #789);
    background-image: var(--bgi);

    background-image: 
    linear-gradient(120deg, #f000 45%, #ddd8 50%, #00f0 60%),
    var(--bgi),
    linear-gradient(165deg, #999, #333);
    background-size: 350% 100%, 100%, 100%;
    background-position-x: 100%, 0%, 0%;
    transition: background-position-x 0ms ease-in-out;
}
.card-img:hover {
    background-position-x: 0%, 0%, 0%;
    transition: background-position-x 800ms ease-in-out;
}

.card-tag-list {
    position: absolute;
    bottom: .25rem; right: .25rem;
    padding: .25rem;

    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.card-tag {
    padding: .25rem;
    border-radius: 2rem;
    color: #222;
    background-color: #fc5;
    cursor: pointer;
}



.hover-glow {
    overflow: hidden;
}
.hover-glow::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%; width: 100%;
    background-image: linear-gradient(120deg, #fff0 45%, #fffa 50%, #fff0 60%);
    background-size: 350% 100%;
    background-position-x: 100%;
    transition: background-position-x 0ms ease-in-out;
}
.hover-glow:hover::after {
    background-position-x: 0%;
    transition: background-position-x 1200ms ease-in-out;
}