/* Card Section */
.cards-section {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
}

#cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
}

/* Card Formating */
.card::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        500px circle at var(--mouse-x) var(--mouse-y),
        hsl(var(--color) / 0.35),
        transparent 40%
    );
    border-radius: inherit;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease;
}

#cards:hover > .card::before,
.card.touch-hover::before {
    opacity: 1;
}

#cards:hover > .card {
    background: radial-gradient(
        500px circle at var(--mouse-x) var(--mouse-y),
        hsl(var(--color) / 1),
        transparent
    );
}