/* ******************************************** */
/** GLOBAL POPUP
/* ******************************************** */

.c-global-popup{
    --_padd: 0.8rem;
    
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
    background-color: hsl( var(--color-neutral-800-hsl) / 90% );
    padding: var(--tap-size) var(--_padd);
    place-items: center;
    overflow: hidden;
    overflow-y: auto;
}
.c-global-popup.is-visible{
    display: grid;
}
.c-global-popup__holder{
    width: 100%;
    max-width: 51.2rem;
    background-color: var(--color-neutral-900);
    position: relative;
    box-shadow: 0 8px 16px -4px hsl( var(--color-neutral-900-hsl) / 20% );
}
.c-global-popup__holder img{
    aspect-ratio: 1;
    object-fit: cover;
}
.c-global-popup__close{
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    color: var(--color-neutral-100);
    border-bottom: 1px solid hsl( var(--color-neutral-100-hsl) / 60%);
    font-size: 1.2rem;
    margin-bottom: -1.6rem;
}
.c-global-popup__close:hover{
    color: var(--color-primary-400);
    border-bottom: 1px solid hsl( var(--color-primary-400-hsl) / 60%);
}

.c-global-popup.is-closing{
    animation: fadeOut 0.5s ease-out;
}

@keyframes fadeOut {
    from { opacity: 1 }
    to { opacity: 0 }
}