/* ------- Card ------- */

.app-card { 
    position: relative;
    color: #760404;
    background-color: #f2ff95;  
    border: 4px solid #05028f;
    width: 320px;
    height: 300px;
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    display: flex;               /* perfect centering */
    justify-content: center;
    align-items: center;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;            /* hide logo overflow */
    cursor: pointer;             /* hand cursor */
}

/* Watermark layer */
.app-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/assets/images/logo.png') center/contain no-repeat;
    opacity: 0.15;               /* watermark effect */
    z-index: 1;
}

/* Text stays on top */
.app-card span {
    position: relative;    
    /* pointer-events: none; */ /* youtube video in modal */
    z-index: 2;
}

/* Hover effect */
.app-card:hover {
    transform: scale(1.02);
    transition: 0.25s ease;
}

/* Hover with thumbnail */
.app-card.has-thumb:hover::before {
    opacity: 0 !important;
}

.app-card.has-thumb:hover {
    background: var(--thumb-url) center/100% 100% no-repeat;
}

.app-card.has-thumb:hover .card-text {
    opacity: 0;
}