
.popup-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    z-index: 999999;
    display: grid;
    place-items: center;
}


.popup-dialog__box {
    position: relative;
    width: 98%;
    height: 98dvh;
    max-height: calc(98dvh - 60px);
    margin: 1dvh auto;
    display: flex;
    justify-content: center;
    overflow: hidden;
    border-radius: 26px;
    background: var(--popup-bg-gradient);
    box-shadow: 0 35px 100px var(--album-view-thumb-box-shadow);
    outline: none;
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: 40px;

    transform-origin: center;
    animation: popup-dialog-grow-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    
}

.popup-dialog__close_div {
   position: flex;
   display: flex;
   width: 100%;
   align-items: flex-end;
   justify-content: flex-end;
   justify-items: flex-end;
   padding-left: 10px;
   padding-right: 10px;
   z-index: 900;
}

.popup_text_content {
    width: 90%;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    padding: 40px;
}

@media (max-width: 820px) {
    .popup-dialog {
        padding: 0;
    }

    .popup-dialog__box {
        grid-template-columns: minmax(0, 1fr);

        width: 100%;
        height: 100dvh;
        max-height: calc(98dvh - 60px);

        border: 0;
        border-radius: 0;

        overflow-y: auto;
    }

    
}

@media (max-width: 480px) {
    
}

@media (prefers-reduced-motion: reduce) {
    .popup-dialog__image {
        transition: none;
    }
}