.project {
    padding: 0 var(--general-padding);
}

.project > .inner {
    padding: -webkit-calc(var(--general-padding) / 2);
    padding: calc(var(--general-padding) / 2);
    border: 1px solid var(--color-black);
    overflow: hidden;
}

.darkmode .project > .inner {
    border-color: var(--color-white);
}

.project .info {
    width: 22vw;
    padding-right: var(--general-padding);
    float: left;
}

.project .info h1,
.project .info .meta {
    display: block;
    margin-bottom: 20px;
}

.project .info .meta span {
    display: inline-block;
    margin-right: 20px;
}

.project .info .text {
    display: block;
    margin-bottom: 60px;
}

.project .info .products ul {
    list-style: none;
    margin-top: 10px;
}

.project .info .products li {
    display: block;
    width: 100%;
    padding-right: 30px;
    background-image: url(../../images/arrow-small.svg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
}

.darkmode .project .info .products li {
    filter: invert(1);
}

.darkmode .project .info .products li a {
    color: var(--color-black);
}

.project .info .products li a {
    width: 100%;
    display: block;
}

.project .image {
    display: inline-block;
}

.project .image .pictureContainer {
    margin-bottom: 10px;
}

.project .image:nth-child(2),
.project .image:nth-child(9),
.project .image:nth-child(16) {
    width: 24vw;
    float: left;
}

.project .image:nth-child(9),
.project .image:nth-child(16) {
    margin-left: 22vw;
}

.project .image:nth-child(9),
.project .image:nth-child(16),
.project .image:nth-child(10),
.project .image:nth-child(17) {
    margin-top: -webkit-calc(var(--general-padding) * 2);
    margin-top: calc(var(--general-padding) * 2); 
}

.project .image:nth-child(3),
.project .image:nth-child(10),
.project .image:nth-child(17) {
    width: 31vw;
    float: right;
}

.project .image:nth-child(4),
.project .image:nth-child(11),
.project .image:nth-child(18) {
    margin-top: -webkit-calc(var(--general-padding) * 2);
    margin-top: calc(var(--general-padding) * 2);
    clear: both;
    width: 24vw;
    float: left;
}

.project .image:nth-child(5),
.project .image:nth-child(12),
.project .image:nth-child(19) {
    margin-top: -webkit-calc(var(--general-padding) * 2);
    margin-top: calc(var(--general-padding) * 2);
    width: 32vw;
    margin-left: 9.1vw;
    float: left;
}

.project .image:nth-child(6),
.project .image:nth-child(13),
.project .image:nth-child(20) {
    clear: both;
    float: right;
    width: 48vw;
    margin-top: -webkit-calc(var(--general-padding) * -2);
    margin-top: calc(var(--general-padding) * -2);
}

.project .image:nth-child(7),
.project .image:nth-child(14),
.project .image:nth-child(21) {
    clear: both;
    float: left;
    width: 40vw;
    margin-top: -webkit-calc(var(--general-padding) * -2);
    margin-top: calc(var(--general-padding) * -2);
}

.project .image:nth-child(8),
.project .image:nth-child(15),
.project .image:nth-child(22) {
    clear: both;
    float: right;
    width: 32vw;
    transform: -webkit-translateY(-100%);
    transform: translateY(-100%);
    margin-bottom: -100%;
}


@media screen and (max-width: 960px) {
    .project .info {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }

    .project .info .text {
        margin-bottom: 40px;
    }

    .project .info .products {
        max-width: 375px;
    }

    .project > .inner {
        padding: var(--general-padding);
    }

    .project .image:nth-child(2),
    .project .image:nth-child(9),
    .project .image:nth-child(16) {
        width: 65vw;
        float: none;
        display: block;
        margin: 0 auto !important;
        clear: both;
    }

    .project .image:nth-child(9),
    .project .image:nth-child(16),
    .project .image:nth-child(10),
    .project .image:nth-child(17) {
        margin-top: var(--general-padding); 
    }

    .project .image:nth-child(3),
    .project .image:nth-child(10),
    .project .image:nth-child(17) {
        width: calc(100% + calc(var(--general-padding) * 2));
        position: relative;
        left: calc(var(--general-padding) * -1);
        float: left;
        margin-top: var(--general-padding);
    }

    .project .image:nth-child(3) span,
    .project .image:nth-child(10) span,
    .project .image:nth-child(17) span {
        left: var(--general-padding);
        position: relative;
    }

    .project .image:nth-child(4),
    .project .image:nth-child(11),
    .project .image:nth-child(18) {
        margin-top: var(--general-padding);
        clear: both;
        width: 80vw;
        float: right;
        right: calc(var(--general-padding) * -1);
        position: relative;
    }

    .project .image:nth-child(5),
    .project .image:nth-child(12),
    .project .image:nth-child(19) {
        margin-top: var(--general-padding);
        clear: both;
        width: 80vw;
        float: left;
        left: calc(var(--general-padding) * -1);
        position: relative;
        margin-left: 0;
    }

    .project .image:nth-child(6),
    .project .image:nth-child(13),
    .project .image:nth-child(20) {
        clear: both;
        float: left;
        width: 90%;
        margin-top: var(--general-padding);
        left: 5%;
        position: relative;
    }

    .project .image:nth-child(7),
    .project .image:nth-child(14),
    .project .image:nth-child(21) {
        width: calc(100% + calc(var(--general-padding) * 2));
        position: relative;
        left: calc(var(--general-padding) * -1);
        float: left;
        margin-top: var(--general-padding);
    }

    .project .image:nth-child(7) span,
    .project .image:nth-child(14) span,
    .project .image:nth-child(21) span {
        left: var(--general-padding);
        position: relative;
    }

    .project .image:nth-child(8),
    .project .image:nth-child(15),
    .project .image:nth-child(22) {
        clear: both;
        margin-top: var(--general-padding);
        float: right;
        width: 64%;
        transform: none;
        margin-bottom: 0;
    }
}