.swiper-slide.swiper-slide-prev .swiper-slide-width {
    width:75%
}

.swiper-slide.swiper-slide-active .swiper-slide-width {
    width:100%
}

.swiper-slide.swiper-slide-next .swiper-slide-width {
    width:75%
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    line-height:1.3
}

*, *:before, *:after {
    box-sizing: inherit;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}

img {
    border: 0;
}

img {
    max-width: 100%;
    vertical-align: top;
    height: auto;
}

.home-carousel {
    display: flex;
    background: color(black);
    color: white;
    align-items: center;

    @include media('>=tablet') {
        padding: 120px 0;
    }

    .swiper-slide {
        max-width: 1051px;
        width: 76vw;
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        transform-origin: 50% 50%;
        transform-origin: 50% var(--pivot-y, 50%);

        .nav-active & {
            transform: scale(0.9);
            opacity: 0;
        }
    }

    .slide-wrap {
        position: relative;
        display: block;
        width: 100%;

        * {
            pointer-events: none;
        }
    }

    .slider-caption {
        padding-top: 16px;
        font-family: $space-mono;
        font-size: 14px;
        line-height: 1;
        font-weight: 400;
        display: block;
        text-transform: uppercase;
        width: 100%;
        letter-spacing: 0;

        @include media('>=tablet') {
            padding: 0;
            position: absolute;
            left: 100%;
            top: 0;
            transform: rotate(90deg);
            height: 20px;
            transform-origin: 0 0;
            margin-left: 24px;
            white-space: nowrap;
        }
    }

    .slider-image {
        position: relative;
        width: 100%;
        padding-top: 62%;
        transition: border-radius 0.3s ease-out;
        overflow: hidden;

        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        video {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .swiper-slide-active {
        z-index: 9;

        .slide-wrap {
            &:hover {
                .slider-image {
                    @extend %card-border-radius;
                }
            }
        }
    }

    .home-slider-inner {
        position: relative;
        width: 100%;
    }

    .slider-button {
        position: absolute;
        height: 100%;
        top: 0;
        width: 14vw;
        z-index: 1;
    }

    .slider-button--prev {
        left: 0;
    }

    .slider-button--next {
        right: 0;
    }
}

@media (max-width: 425px) {
    .swiper-slide {
        width: calc((100vw - (var(--container-gutter) * 2)) + (var(--col-gap-padding) * 2)) !important;
    }
}

.p-white-0-75 p {
    color:var(--white-0-75)
}

.swiper.album-carousel {
    overflow:visible !important
}

.hero-height {
    height: 65vw;
}

.inline-icon {
    margin-top:calc(var(--h3) * 0.24590)
}

.inline-icon svg {
    height: calc(var(--h3) * 0.666);
    width:calc(var(--h3) * 0.666)
}

.container-gutter-swiper {
    padding-left: calc(var(--container-gutter) - var(--col-gap-padding));
    padding-right:calc(var(--container-gutter) - var(--col-gap-padding))
}

.col-gap-padding {
    padding-left: var(--col-gap-padding);
    padding-right:var(--col-gap-padding)
}

.col-gap-mn {
    margin-left: calc(var(--col-gap-padding) * -1);
    margin-right:calc(var(--col-gap-padding) * -1) 
}
    
.col-gap-padding-large {
    padding-left: calc(var(--col-gap-padding) * 1.5);
    padding-right:calc(var(--col-gap-padding) * 1.5)
}

.album-text-padding {
    padding: calc((var(--space-medium) * 2) - var(--multi-gap-large)) 0;
}

.about-modules .module+.module {
    margin-top:var(--space-large)
}

@media (min-width: 640px) {
    .hero-height {
        height: 55vw;
    }

    .inline-icon {
        margin-top:calc(var(--sm-h3) * 0.24590)
    }
    
    .inline-icon svg {
        height: calc(var(--sm-h3) * 0.666);
        width:calc(var(--sm-h3) * 0.666)
    }
    
    .container-gutter-swiper {
        padding-left: calc(var(--sm-container-gutter) - var(--sm-col-gap-padding));
        padding-right:calc(var(--sm-container-gutter) - var(--sm-col-gap-padding))
    }
    
    .col-gap-padding {
        padding-left: var(--sm-col-gap-padding);
        padding-right:var(--sm-col-gap-padding)
    }
    
    .col-gap-mn {
        margin-left: calc(var(--sm-col-gap-padding) * -1);
        margin-right:calc(var(--sm-col-gap-padding) * -1) 
    }
    
    .col-gap-padding-large {
        padding-left: calc(var(--sm-col-gap-padding) * 1.5);
        padding-right:calc(var(--sm-col-gap-padding) * 1.5)
    }

    .album-text-padding {
       padding: calc((var(--sm-space-medium) * 2) - var(--sm-multi-gap-large)) 0;
    }
    

    .about-modules .module+.module {
        margin-top:var(--sm-space-large)
    }
}

@media (min-width: 1280px) {
    .hero-height {
        height: 40vw;
    }
    
    .inline-icon {
        margin-top:calc(var(--md-h3) * 0.24590)
    }
    
    .inline-icon svg {
        height: calc(var(--md-h3) * 0.666);
        width:calc(var(--md-h3) * 0.666)
    }
    
    .container-gutter-swiper {
        padding-left: calc(var(--md-container-gutter) - var(--md-col-gap-padding));
        padding-right:calc(var(--md-container-gutter) - var(--md-col-gap-padding))
    }

    .col-gap-padding {
        padding-left: var(--md-col-gap-padding);
        padding-right:var(--md-col-gap-padding)
    }
    
    .col-gap-mn {
        margin-left: calc(var(--md-col-gap-padding) * -1);
        margin-right:calc(var(--md-col-gap-padding) * -1) 
    }    

    .col-gap-padding-large {
        padding-left: calc(var(--md-col-gap-padding) * 1.5);
        padding-right:calc(var(--md-col-gap-padding) * 1.5)
    }
    
    .album-text-padding {
       padding: calc((var(--md-space-medium) * 2) - var(--md-multi-gap-large)) 0;
    }
    
    .about-modules .module+.module {
        margin-top:var(--md-space-large)
    }
}

@media (min-width: 1440px) {
    .hero-height {
        min-height: 4vw;
    }
    
    .inline-icon {
        margin-top:calc(var(--lg-h3) * 0.24590)
    }
    
    .inline-icon svg {
        height: calc(var(--lg-h3) * 0.666);
        width:calc(var(--lg-h3) * 0.666)
    }
    
    .container-gutter-swiper {
        padding-left: calc(var(--lg-container-gutter) - var(--lg-col-gap-padding));
        padding-right:calc(var(--lg-container-gutter) - var(--lg-col-gap-padding))
    }
    
    .col-gap-padding {
        padding-left: var(--lg-col-gap-padding);
        padding-right:var(--lg-col-gap-padding)
    }
    
    .col-gap-mn {
        margin-left: calc(var(--lg-col-gap-padding) * -1);
        margin-right:calc(var(--lg-col-gap-padding) * -1) 
    }

    .col-gap-padding-large {
        padding-left: calc(var(--lg-col-gap-padding) * 1.5);
        padding-right:calc(var(--lg-col-gap-padding) * 1.5)
    }
    
    .album-text-padding {
       padding: calc((var(--lg-space-medium) * 2) - var(--lg-multi-gap-large)) 0;
    }
    
    .about-modules .module+.module {
        margin-top:var(--lg-space-large)
    }
}

.home-carousel .slide-wrap {
   transition-timing-function: ease-out;
}

.about-drawer, .project-info-drawer {
    transform: translateX(100%);
    transition: transform .4s
}

.about-drawer.in-view, .project-info-drawer.in-view {
    transform:translateX(0%)
}

.cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 10000;
    user-select: none;
    pointer-events: none;
}

.hover-arrow {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background:rgba(255, 66, 13)
}

.hover-arrow-left, .hover-arrow-right {
    position: absolute;
    top: 0;
    left: 0; 
    width: 80px;
    height: 80px;
    transform: translateX(100%);
}

.hover-arrow-left svg, .hover-arrow-right svg {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.close-icon svg, svg.plus-icon {
    height:calc(var(--h1) * 1.3)
}

@media (min-width: 640px) {
    .close-icon svg, svg.plus-icon {
        height:calc(var(--sm-h1) * 1.3)
    }
}

@media (min-width: 1280px) {
    .close-icon svg, svg.plus-icon {
        height:calc(var(--md-h1) * 1.3)
    }
}

@media (min-width: 1440px) {
    .close-icon svg, svg.plus-icon {
        height:calc(var(--lg-h1) * 1.3)
    }
}