.projects-image {
    overflow: hidden;
    position: relative;
    height: 814px
}

@media (max-width: 1200px) {
    .projects-image {
        height: 768px
    }
}

@media (max-width: 768px) {
    .projects-image {
        height: 831px
    }
}

@media (max-width: 650px) {
    .projects-image {
        height: 675px
    }
}

.projects-image #scene {
    height: 100%;
    width: 100%
}

.projects-image__wrapper {
    position: relative;
    height: 100%
}

.projects-image__content {
    max-width: 463px;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 4
}

.projects-image__description {
    margin-top: 18px;
    text-align: center;
    padding: 0 45px
}

.projects-image__title {
    text-align: center
}

@media (max-width: 1024px) {
    .projects-image__title a {
        font-size: 48px
    }
}

@media (max-width: 768px) {
    .projects-image__title a {
        font-size: 44px
    }
}

@media (max-width: 425px) {
    .projects-image__title a {
        font-size: 32px
    }
}

.projects-image .project-image {
    --height: 814;
    --width: 1440;
    --left: calc(var(--h) / var(--width) * 100%);
    --right: calc(var(--h) / var(--width) * 100%);
    --top: calc(var(--v) / var(--height) * 100%);
    --bottom: calc(var(--v) / var(--height) * 100%);
    position: absolute;
    width: 215px;
    height: 270px;
    opacity: 1;
    -webkit-transition: all .8s ease;
    transition: all .8s ease;
    cursor: pointer
}

@media (max-width: 1200px) {
    .projects-image .project-image {
        --width: 1024;
        width: 170px;
        height: 213px
    }
}

@media (max-width: 768px) {
    .projects-image .project-image {
        --width: 768
    }
}

@media (max-width: 650px) {
    .projects-image .project-image {
        --width: 375;
        width: 104px;
        height: 132px
    }
}

.projects-image .project-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.projects-image .project-image.img-1 {
    --v: 186;
    --h: -77;
    top: var(--top);
    left: var(--left)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-1 {
        --v: 182;
        --h: -29
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-1 {
        --v: 203;
        --h: -90
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-1 {
        --v: 206;
        --h: -65
    }
}

.projects-image .project-image.img-2 {
    --v: 76;
    --h: 278;
    top: var(--top);
    left: var(--left)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-2 {
        --v: 71;
        --h: 212
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-2 {
        --v: 97;
        --h: 149
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-2 {
        --v: 74;
        --h: 60
    }
}

.projects-image .project-image.img-3 {
    --v: -50;
    --h: 536;
    top: var(--top);
    right: var(--right)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-3 {
        --v: -21;
        --h: 341
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-3 {
        --v: 0;
        --h: 201
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-3 {
        --v: -20;
        --h: 90
    }
}

.projects-image .project-image.img-4 {
    --v: 119;
    --h: 174;
    top: var(--top);
    right: var(--right)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-4 {
        --v: 126;
        --h: 80
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-4 {
        --v: 152;
        --h: -14
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-4 {
        --v: 140;
        --h: -8
    }
}

.projects-image .project-image.img-5 {
    --v: 64;
    --h: -18;
    bottom: var(--bottom);
    right: var(--right)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-5 {
        --v: 168;
        --h: -64
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-5 {
        display: none
    }
}

.projects-image .project-image.img-6 {
    --v: -55;
    --h: 306;
    bottom: var(--bottom);
    right: var(--right)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-6 {
        --v: 0;
        --h: 155
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-6 {
        --v: 105;
        --h: -37
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-6 {
        --v: 122;
        --h: -52
    }
}

.projects-image .project-image.img-7 {
    --v: -96;
    --h: 608;
    bottom: var(--bottom);
    right: var(--right)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-7 {
        --v: -22;
        --h: 376
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-7 {
        --v: 32;
        --h: 137
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-7 {
        --v: 43;
        --h: 48
    }
}

.projects-image .project-image.img-8 {
    --v: -228;
    --h: 396;
    bottom: var(--bottom);
    left: var(--left)
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-8 {
        --v: -120;
        --h: 299
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-8 {
        --v: -88;
        --h: 282
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-8 {
        --v: -105;
        --h: 137
    }
}

.projects-image .project-image.img-9 {
    --v: -31;
    --h: 104;
    bottom: var(--bottom);
    left: var(--left);
    z-index: 10
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-9 {
        --v: 0;
        --h: 55
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-9 {
        --v: 66;
        --h: 64
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-9 {
        --v: 81;
        --h: 33
    }
}

.projects-image .project-image.img-10 {
    --v: -161;
    --h: -46;
    bottom: var(--bottom);
    left: var(--left);
    z-index: 0
}

@media (max-width: 1200px) {
    .projects-image .project-image.img-10 {
        --v: -84;
        --h: -56
    }
}

@media (max-width: 768px) {
    .projects-image .project-image.img-10 {
        --v: -40;
        --h: -48
    }
}

@media (max-width: 650px) {
    .projects-image .project-image.img-10 {
        --v: -10;
        --h: -38
    }
}

.projects-image .project-image.img-11 {
    top: 221px;
    left: -8%
}

.projects-image .project-image.img-12 {
    top: 112px;
    left: 251px
}

.projects-image .project-image.img-13 {
    top: 26px;
    left: 521px
}

.projects-image .project-image.img-14 {
    top: 26px;
    right: 354px
}

.projects-image .project-image.img-15 {
    top: 291px;
    right: -8%
}

.projects-image .project-image.img-16 {
    bottom: 303px;
    right: 174px
}

.projects-image .project-image.img-17 {
    bottom: -10%;
    right: 174px
}

.projects-image .project-image.img-18 {
    bottom: 27px;
    right: 548px
}

.projects-image .project-image.img-19 {
    bottom: 206px;
    left: 190px
}

.projects-image .project-image:hover {
    z-index: 2
}

.dark {
    background: #080808
}

.dark .h1, .dark .p1 {
    color: #fff
}

.project-video__item {
    width: 100%;
    height: 100%
}