/* Variables */
:root {
    --project-carousel-panel-height: calc(var(--screen-width) * 9/16);
    --project-carousel-panel-tilt-offset: calc(var(--project-carousel-panel-height) * 0.105); /* 0.105 is an approximation of the tangent of 4 degrees */
}

@media screen and (min-width: 992px) {
    :root {
        --project-carousel-panel-height: calc(var(--screen-width) * 9/16 * 0.66);
    }
}

/* Styling */

/* Project carousel item styling: general */
.project-outer-carousel-panel {
    position: relative;
    padding-top: calc(7px - 1px); /* Should be equal to border overlay height minus one */
    padding-bottom: calc(7px - 1px); /* Should be equal to border overlay height minus one */
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
}

.project-outer-carousel-panel .border-overlay-top {
    position: absolute;
    height: 7px; /* Should be equal to showcase panel padding */
    top: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 3;
}

.project-outer-carousel-panel .border-overlay-bottom {
    position: absolute;
    height: 7px; /* Should be equal to showcase panel padding */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 3;
}

.project-carousel-panel {
    position: relative;
    height: var(--project-carousel-panel-height);
    /* Custom column-like width */
    width: 100%;
    max-width: 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    order: 2;
}

.project-carousel-panel .carousel {
    height: 100%;
}

.project-left-image-panel,
.project-right-image-panel {
    position: relative;
    min-height: var(--project-carousel-panel-height);
    /* Custom column-like width */
    width: 0%;
    max-width: 0%;
    -ms-flex: 0 0 0%;
    flex: 0 0 0%;
}

.project-left-image-panel {
    order: 1;
}

.project-right-image-panel {
    order: 3;
}

@media screen and (min-width: 992px) {
    .project-carousel-panel {
        /* Custom column-like width */
        width: 66%;
        max-width: 66%;
        -ms-flex: 0 0 66%;
        flex: 0 0 66%;
    }

    .project-left-image-panel,
    .project-right-image-panel {
        position: relative;
        min-height: var(--project-carousel-panel-height);
        /* Custom column-like width */
        width: 17%;
        max-width: 17%;
        -ms-flex: 0 0 17%;
        flex: 0 0 17%;
    }
}

.project-left-image-panel .inner-1 {
    position: relative;
    margin-left: 0;
    margin-right: calc(-0.5 * var(--project-carousel-panel-tilt-offset));
    height: 100%;
    background-color: #ffffff;
    z-index: 1;
    overflow: hidden;
}

.project-right-image-panel .inner-1 {
    position: relative;
    margin-left: calc(-0.5 * var(--project-carousel-panel-tilt-offset));
    margin-right: 0;
    height: 100%;
    background-color: #ffffff;
    z-index: 1;
    overflow: hidden;
}

.project-left-image-panel .inner-2 {
    position: relative;
    margin-left: -4px;
    margin-right: 4px;
    height: 100%;
    clip-path: inherit;
    background-color: #000000;
}

.project-right-image-panel .inner-2 {
    position: relative;
    margin-left: 4px;
    margin-right: -4px;
    height: 100%;
    clip-path: inherit;
    background-color: #000000;
}

.project-left-image-panel img,
.project-right-image-panel img {
    position: absolute;
    top: 0;
    height: 100%;
}

.project-left-image-panel img {
    right: 0;
}

.project-right-image-panel img {
    left: 0;
}

@media screen and (min-width: 992px) {
    .project-left-image-panel .inner-1 {
        margin-right: calc(-1 * var(--project-carousel-panel-tilt-offset));
    }

    .project-right-image-panel .inner-1 {
        margin-right: calc(-1 * var(--project-carousel-panel-tilt-offset));
    }

    .project-left-image-panel img,
    .project-right-image-panel img {
    }
}

/* Project carousel item styling: variant 1 (skewed left) */
.project-outer-carousel-panel.variant-1 .project-left-image-panel .inner-1 {
    clip-path: polygon(0% 50%, 100% 100%, 0% 100%);
}

.project-outer-carousel-panel.variant-1 .project-right-image-panel .inner-1 {
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%);
}

@media screen and (min-width: 992px) {
    .project-outer-carousel-panel.variant-1 .carousel-control-prev {
        padding-left: calc(0.5 * var(--project-carousel-panel-tilt-offset) + 11px);
    }

    .project-outer-carousel-panel.variant-1 .carousel-control-next {
        right: 2px; /* Offset because this control seems to fall behind the diagonal more than the left control does */
        padding-right: calc(0.5 * var(--project-carousel-panel-tilt-offset) + 11px);
    }

    .project-outer-carousel-panel.variant-1 .project-left-image-panel .inner-1 {
        clip-path: polygon(0% 0%, calc(100% - var(--project-carousel-panel-tilt-offset)) 0%, 100% 100%, 0% 100%);
    }

    .project-outer-carousel-panel.variant-1 .project-right-image-panel .inner-1 {
        margin-left: calc(-1 * var(--project-carousel-panel-tilt-offset));
        margin-right: 0;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, var(--project-carousel-panel-tilt-offset) 100%);
    }
}

/* Showcase item styling: variant 2 (skewed right) */
.project-outer-carousel-panel.variant-2 .project-left-image-panel .inner-1 {
    clip-path: polygon(0% 0%, 100% 0%, 0% 50%);
}

.project-outer-carousel-panel.variant-2 .project-right-image-panel .inner-1 {
    clip-path: polygon(100% 50%, 100% 100%, 0% 100%);
}

@media screen and (min-width: 992px) {
    .project-outer-carousel-panel.variant-2 .carousel-control-prev {
        padding-left: calc(0.5 * var(--project-carousel-panel-tilt-offset) + 11px);
    }

    .project-outer-carousel-panel.variant-2 .carousel-control-next {
        right: 2px; /* Offset because this control seems to fall behind the diagonal more than the left control does */
        padding-right: calc(0.5 * var(--project-carousel-panel-tilt-offset) + 11px);
    }

    .project-outer-carousel-panel.variant-2 .project-left-image-panel .inner-1 {
        clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--project-carousel-panel-tilt-offset)) 100%, 0% 100%);
    }

    .project-outer-carousel-panel.variant-2 .project-right-image-panel .inner-1 {
        margin-left: calc(-1 * var(--project-carousel-panel-tilt-offset));
        margin-right: 0;
        clip-path: polygon(var(--project-carousel-panel-tilt-offset) 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}