:root {
    --swiper-navigation-color: var(--background-color)!important;
    --project-info-transition: all 800ms cubic-bezier(0.8, 0, 0.33, 1);
    --project-info-transform: translateX(100%);
    --project-info-height-3d: calc(100% - var(--footer-height) - var(--model-switcher-height));
    --project-info-height: calc(100% - var(--footer-height));
    --project-info-width: 725px;
    --project-info-table-column-template: repeat(3, calc(100% / 3));
    --project-info-table-item-height: 220px;
    --project-info-close-btn-left: -129px;
}

.project_info_container {
    background-color: var(--background-color);
    transition: var(--project-info-transition);
    transform: var(--project-info-transform);
    border-inline-start: var(--nav-border);
    padding: var(--page-vertical-padding) 0;
    height: var(--project-info-height);
    width: var(--project-info-width);
    flex-direction: column;
    box-sizing: border-box;
    justify-content: start;
    align-items: center;
    position: absolute;
    display: flex;
    z-index: -1;
    opacity: 0;
    right: 0;
    top: 0;
}

.project_info_container.type_3d {
    background-color: var(--background-color-opacity);
    height: var(--project-info-height-3d);
}

.project_info_container.show {
    transform: translateX(0);
    z-index: 1000;
    opacity: 1;
}

.project_info_container > .project_info_title {
    margin: 0 0 calc(2 * var(--page-block-vertical-padding));
    line-height: var(--header-text-line-height);
    font-weight: var(--header-text-font-weight);
    font-size: var(--header-text-font-size);
    padding: 0 var(--page-vertical-padding);
    letter-spacing: var(--letter-spacing);
    color: var(--text-main-color);
    text-transform: uppercase;
    white-space: break-spaces;
    box-sizing: border-box;
    text-align: start;
    width: 100%;
}

.project_info_container > .project_info__scroll_block {
    padding: 0 var(--page-vertical-padding);
    box-sizing: border-box;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow-y: scroll;
    display: flex;
    width: 100%;
}

.project_info_container > .project_info__scroll_block {
  scrollbar-width: thin;
  /*scrollbar-color: var(--scroll-thumb) var(--scroll-track); !* thumb then track *!*/
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block {
    grid-template-columns: var(--project-info-table-column-template);
    margin-bottom: calc(2 * var(--page-block-vertical-padding));
    border: var(--nav-border);
    box-sizing: border-box;
    display: grid;
    width: 100%;
    gap: 0;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr {
    padding: var(--page-block-vertical-padding);
    height: var(--project-info-table-item-height);
    border-inline-end: var(--nav-border);
    border-bottom: var(--nav-border);
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    width: 100%;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr.swiper {
    padding: 0;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr:nth-child(3),
.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr:nth-child(6) {
    border-inline-end: 0;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr:nth-child(4),
.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr:nth-child(5),
.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr:nth-child(6) {
    border-bottom: 0;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr > .project_info_table_descr__tilte,
.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr > .project_info_table_descr__text {
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    letter-spacing: var(--letter-spacing);
    margin: 0;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr > .project_info_table_descr__tilte {
    text-transform: uppercase;
}

.project_info_description__block {
    font-weight: var(--usual-text-font-weight);
    line-height: var(--usual-text-line-height);
    font-size: var(--usual-text-font-size);
    letter-spacing: var(--letter-spacing);
    white-space: break-spaces;
    text-align: start;
    width: 100%;
    margin: 0;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr > .project_info_table__swiper {
    box-sizing: border-box;
    display: flex;
}

.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr > .project_info_table__swiper,
.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr > .project_info_table__swiper > .project_info_table__swiper_slide,
.project_info_container > .project_info__scroll_block > .project_info_table_descrs__block > .project_info_table_descr > .project_info_table__swiper > .project_info_table__swiper_slide > .project_info_table_descr__swiper_image {
    height: 100%;
    width: 100%;
}

.project_info_container > .project_info_close_btn {
    transition: var(--project-info-transition);
    left: var(--project-info-close-btn-left);
    transform: translateX(1000%);
    justify-content: end;
    flex-direction: row;
    align-items: center;
    position: absolute;
    cursor: pointer;
    display: flex;
    z-index: -10;
    opacity: 0;
    top: 25px;
}

.project_info_container > .project_info_close_btn.show {
    transform: translateX(0);
    z-index: 100;
    opacity: 1;
}

.project_info_container > .project_info_close_btn > .project_info_close_arrow {
    position: absolute;
    rotate: 180deg;
    left: -34px;
}

.project_info_container > .project_info_close_btn > .project_info_close_button {
    padding: calc(var(--page-vertical-padding)/4) calc(var(--page-vertical-padding)/2);
    line-height: var(--header-text-line-height);
    font-weight: var(--header-text-font-weight);
    font-size: var(--header-text-font-size);
    color: var(--accient-block-text-color);
    letter-spacing: var(--letter-spacing);
    background: var(--accient-color);
    text-transform: uppercase;
    box-sizing: border-box;
    align-items: center;
    display: flex;
}

@media only screen and (max-width: 1440px) {
    :root {
        --project-info-close-btn-left: -129px;
        --project-info-width: 640px;
    }

    .project_info_container > .project_info_close_btn > .project_info_close_arrow {
        height: 40px;
        left: -33px;
    }
}

@media only screen and (max-width: 1240px) {
    :root {
        --project-info-close-btn-left: -123px;
        --project-info-width: 520px;
    }

    .project_info_container > .project_info_close_btn > .project_info_close_arrow {
        height: 37px;
        left: -30px;
    }
}

@media only screen and (max-width: 1080px) {
    :root {
        --project-info-close-btn-left: -110px;
        --project-info-width: 480px;
    }

    .project_info_container > .project_info_close_btn > .project_info_close_arrow {
        height: 33px;
        left: -27px;
    }
}

@media only screen and (max-width: 960px) {
    .project_info_container {
        display: none;
    }
}
