.card-8:before, .card-3:after {
    border-radius: 10px;
}
.card-8:before {
    background-color: black !important;
}
.card-8:after {
    border-radius: 10px;
    background-color: #ef2b2b !important;
}

.card-10:before, .card-3:after {
    border-radius: 10px;
}
.card-10:before {
    background-color: black !important;
}
.card-10:after {
    border-radius: 9px;
    background-color: #ef2b2b !important;
}

.card-4:before, .card-4:after {
    border-radius: 9px;
}
.card-4:before {
    background-color: #f0ebe4 !important;
}
.card-4:after {
    border-radius: 9px;
    background-color: #ef2b2b !important;
}

.card-6:before {
    background-color: #ef2b2b!important;
}
.card-6:after {
    background-color: black !important;
}


[class*='stacked--'] {
    position: relative;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}
[class*='stacked--']:before, [class*='stacked--']:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}
[class*='stacked--']:before {
    z-index: -1;
}
[class*='stacked--']:after {
    z-index: -2;
}
.stacked--left:before, .stacked--left:after {
    transform-origin: right center;
}
.stacked--left:hover {
    transform: translate(-5px, 0);
}
.stacked--left:hover:before {
    transform: translate(5px, 0) scale(0.95);
}
.stacked--left:hover:after {
    transform: translate(10px, 0) scale(0.9);
}
.stacked--right:before, .stacked--right:after {
    transform-origin: left center;
}
.stacked--right:hover {
    transform: translate(5px, 0);
}
.stacked--right:hover:before {
    transform: translate(-5px, 0) scale(0.95);
}
.stacked--right:hover:after {
    transform: translate(-10px, 0) scale(0.9);
}
.stacked--up:before, .stacked--up:after {
    transform-origin: center bottom;
}
.stacked--up:hover {
    transform: translate(0, -5px);
}
.stacked--up:hover:before {
    transform: translate(0, 5px) scale(0.95);
}
.stacked--up:hover:after {
    transform: translate(0, 10px) scale(0.9);
}
.stacked--down:before, .stacked--down:after {
    transform-origin: center top;
}
.stacked--down:hover {
    transform: translate(0, 5px);
}
.stacked--down:hover:before {
    transform: translate(0, -5px) scale(0.95);
}
.stacked--down:hover:after {
    transform: translate(0, -10px) scale(0.9);
}
.stacked--up-left:hover {
    transform: translate(-5px, -5px);
}
.stacked--up-left:hover:before {
    transform: translate(5px, 5px);
}
.stacked--up-left:hover:after {
    transform: translate(10px, 10px);
}
.stacked--up-right:hover {
    transform: translate(5px, -5px);
}
.stacked--up-right:hover:before {
    transform: translate(-5px, 5px);
}
.stacked--up-right:hover:after {
    transform: translate(-10px, 10px);
}
.stacked--down-left:hover {
    transform: translate(-5px, 5px);
}
.stacked--down-left:hover:before {
    transform: translate(5px, -5px);
}
.stacked--down-left:hover:after {
    transform: translate(10px, -10px);
}
.stacked--down-right:hover {
    transform: translate(5px, 5px);
}
.stacked--down-right:hover:before {
    transform: translate(-8px, -8px);
}
.stacked--down-right:hover:after {
    transform: translate(-15px, -15px);
}
.stacked--fan-left {
    transform-origin: center bottom;
}
.stacked--fan-left:before, .stacked--fan-left:after {
    transform-origin: center bottom;
}
.stacked--fan-left:hover {
    transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-left:hover:before {
    transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-left:hover:after {
    transform: translate(5px, 0) rotate(5deg);
}
.stacked--fan-right {
    transform-origin: center bottom;
}
.stacked--fan-right:before, .stacked--fan-right:after {
    transform-origin: 50% 100%;
}
.stacked--fan-right:hover {
    transform: translate(2.5px, 0) rotate(2.5deg);
}
.stacked--fan-right:hover:before {
    transform: translate(-2.5px, 0) rotate(-2.5deg);
}
.stacked--fan-right:hover:after {
    transform: translate(-5px, 0) rotate(-5deg);
}