:root {
    --btnCloseSize: 100px;
    --additionalPhoto_1: 120px;
    --additionalPhoto_2: 90px;
}
.tp-modal {
    .modal-dialog {
        max-width: 980px;
        max-height: 780px;
    }
    .modal-content {
        border-radius: 28px 0 28px 28px;
        @media (max-width: 767px) {
            border-radius: 16px 0 16px 16px;
        }
        .btn-close {
            background-color: #FF4646;
            width: var(--btnCloseSize);
            height: var(--btnCloseSize);
            position: absolute;
            top: 0;
            padding: 0;
            right: calc(var(--btnCloseSize) * -1);
            border-radius: 0;
            opacity: 1;
            background-size: 36px 36px;
            background: #FF4646 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/36px auto no-repeat;
            @media (max-width: 767px) {
                right: 0;
                top: 0;
                width: 52px;
                height: 52px;
                z-index: 20;
                background: #FF4646 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/16px auto no-repeat;
            }
        }
    }
    .modal-body {
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        border-radius: 28px 0 28px 28px;
        overflow: hidden;
        position: relative;
        @media (max-width: 767px) {
            border-radius: 16px 0 16px 16px;
            flex-direction: column;
            .modal-photos {
                max-width: 100%;
                aspect-ratio: 1 / 1;
                max-height: none;
            }
            .modal-wrapper {
                max-width: 100%;
                padding: 24px 16px;
            }
            .modal-photos_additional {
                display: none;
            }
        }
    }
    .modal-photos {
        width: 100%;
        max-width: 50%;
        position: relative;
        aspect-ratio: 585 / 780;
        /* overflow: hidden; */
        max-height: 720px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .modal-photos_main {
            height: 100%;
            width: 100%;
            pointer-events: none;
            user-select: none;
            img {
                /* aspect-ratio: 585 / 780; */
                object-fit: cover;
                object-position: center;
            }
        }
    }
    .modal-photos_additional {
        position: absolute;
        right: 0;
        bottom: 56px;
        .modal-photos_thumb {
            position: absolute;
            right: 0;
            bottom: 0;
            border-radius: 12px;
            border: 2px #fff solid;
            overflow: hidden;
            pointer-events: none;
            user-select: none;
            &:nth-child(1) {
                width: var(--additionalPhoto_1);
                height: auto;
                right: calc(var(--additionalPhoto_1) / 2 * -1);
                bottom: 46px;
                aspect-ratio: 120 / 150;
                transform: rotateZ(10deg);
            }
            &:nth-child(2) {
                width: var(--additionalPhoto_2);
                height: auto;
                right: 16px;
                aspect-ratio: 90 / 135;
                transform: rotateZ(-6deg);
            }
        }
    }
    .modal-wrapper {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 50%;
        height: auto;
        padding: 40px 40px;
        .modal-title {
            font-size: 32px;
            line-height: 1em;
            color: #4E5D70;
            font-weight: 700;
            text-align: center;
        }
        .modal-description {
            font-size: 18px;
            line-height: 1.4em;
            color: #4E5D70;
            text-align: center;
        }
        .modal-button {
            .btn.btn-primary {
                font-size: 18px;
                padding: 12px 32px;
                font-weight: 400;
                color: #fff;
                background-color: #57A1D4;
                border: none;
                text-transform: none;
            }
        }
    }
}