*, *::before, *::after {
box-sizing: border-box;
}
.card-top {
outline: 2px solid var(--e-global-color-primary);
} @property --overlay-alpha {
syntax: "<number>";
inherits: false;
initial-value: 0.4;
} .card-media {
position: relative;
overflow: hidden;
}
.card-media img {
width: 100%;
height: 100%;
object-fit: cover;
} .card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, var(--overlay-alpha)) 65%,
rgba(255, 190, 0, 0.5) 100%
);
transition: --overlay-alpha 0.3s ease;
z-index: 1;
pointer-events: none;
} .card-wrapper:has(.card-top:hover) .card-overlay,
.card-wrapper:has(.card-dark:hover) .card-overlay {
--overlay-alpha: 0.2;
} .card-wrapper:has(.card-top:hover) .card-title,
.card-wrapper:has(.card-dark:hover) .card-title {
transform: translate3d(0, 15px, 0);
color: #ffffff;
} .card-wrapper:has(.card-top:hover) .card-dark,
.card-wrapper:has(.card-dark:hover) .card-dark,
.card-wrapper:has(.card-top:hover) .card-yellow,
.card-wrapper:has(.card-dark:hover) .card-yellow {
transform: translate3d(0, -15px, 0);
} .card-title,
.card-dark,
.card-yellow {
transition: transform 0.3s ease, color 0.5s ease !important;
will-change: transform;
backface-visibility: hidden;
}
@media (max-width: 768px) { .card-wrapper:has(.card-top:hover) .card-title,
.card-wrapper:has(.card-dark:hover) .card-title {
transform: translate3d(0, 3px, 0);
} .card-wrapper:has(.card-top:hover) .card-dark,
.card-wrapper:has(.card-dark:hover) .card-dark,
.card-wrapper:has(.card-top:hover) .card-yellow,
.card-wrapper:has(.card-dark:hover) .card-yellow {
transform: translate3d(0, -3px, 0);
}
}