:root {
    --photo-popup-margin-vertical: 20px;
    --photo-popup-max-height: 90vh;
    --photo-popup-max-width: 90vw;
    --photo-popup-position: 0;
}

.project_photo_container {
    background-color: var(--form-popup-overlay-background);
    z-index: var(--form-popup-z-index);
    pointer-events: unset;
    object-fit: contain;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    flex-wrap: wrap;
    position: fixed;
    display: flex;
    height: 100%;
    width: 100%;
    padding: 0;
    bottom: 0;
    margin: 0;
    right: 0;
    left: 0;
    top: 0;
}

.project_photo_container.hide {
    display: none;
}

.project_photo_popup {
    margin: var(--photo-popup-margin-vertical) auto;
    max-height: var(--photo-popup-max-height);
    background-color: var(--background-color);
    max-width: var(--photo-popup-max-width);
    flex-direction: column;
    pointer-events: auto;
    transform: none;
    display: flex;
    height: auto;
    outline: 0;
}

.project_photo_popup_body {
    padding: var(--page-vertical-padding);
    position: relative;
    overflow-y: auto;
    display: flex;
    margin: 0;
}

.project_photo_popup_image {
    max-height: var(--photo-popup-max-height);
    max-width: var(--photo-popup-max-width);
    width: 100%;
}

.project_photo_popup_image.swiper {
    padding: 0;
}

.project_photo_popup_image.swiper > .project_photo_popup_image__swiper {
    display: flex;
    height: 100%;
    width: 100%;
}

.project_photo_popup_image.swiper > .project_photo_popup_image__swiper > .project_photo_popup_image__swiper_slide {
    display: flex;
    width: 100%;
}

.project_photo_popup_image.swiper > .project_photo_popup_image__swiper > .project_photo_popup_image__swiper_slide > img {
    height: 100%;
    width: 100%;
}

.project_photo_popup_close {
    background-color: var(--accient-color);
    height: var(--page-vertical-padding);
    width: var(--page-vertical-padding);
    right: var(--form-popup-position);
    top: var(--form-popup-position);
    justify-content: center;
    box-sizing: border-box;
    align-items: center;
    position: absolute;
    cursor: pointer;
    display: flex;
}

.project_photo_popup_close_icon {
    height: var(--page-block-vertical-padding);
    width: var(--page-block-vertical-padding);
    transition: var(--nav-transition);
}

.project_photo_popup_close_icon:hover {
    scale: var(--form-popup-close-scale);
}