.projects-page {
    padding: 3.5rem 0 1rem;
    min-height: 80vh;
    min-height: calc(var(--vh, 1vh) * 80);
    margin-bottom: 2rem;
}

.projects-page__hero {
    display: flex;
    margin-bottom: 1rem;
    padding: 0 0.75rem;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0.75rem;
}

.projects-page__hero__featured {
    display: block;
    position: relative;
    height: 75vh;
    max-height: 75vh;
    scroll-snap-align: start;
}

.projects-page__hero__featured:not(:last-child) {
    margin-right: 0.75rem;
}

.projects-page__hero__featured img {
    height: 100%;
    width: auto;
}

.projects-page__hero__info {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem 0.5rem;
    transition: 300ms;
    opacity: 0;
    z-index: 100;
}

.projects-page__hero__info .title {
    margin-left: 12vw;
}

.projects-page__hero__info.white {
    color: white;
}

.projects-page__hero__featured:hover .projects-page__hero__info {
    opacity: 1;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.projects-page__hero::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.projects-page__hero {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


/* 
    Project 
*/

.project {
    overflow: hidden;
    scroll-margin-top: 4rem;
}

.active-project {
    padding-bottom: 0.75rem;
}

.project__header {
    display: block;
    border-top: 1px solid black;
    margin: 0 0.75rem;
    padding: 0.5rem 0;
    transition: all 300ms, opacity 200ms;
    transition-delay: all 300ms, opacity 0ms;
    width: calc(100% - 1.5rem);
}

.project__header,
.project__content {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1rem;
}

.active-project .project__header {
    /* margin-bottom: 0.5rem; */
    padding-bottom: 0;
}


.project__header__number {
    grid-column: span 1;
}

.project__header__title {
    grid-column: span 4;
}

.project__header__location {
    display: none;
}

.project__header__year {
    grid-column: span 1;
    text-align: right;
}

.project__content__description {
    padding: 0.75rem;
    grid-column: span 6;
}

.project__content {
    max-height: 0;
    overflow-y: hidden;
    transition: 800ms;
}

.active-project .project__content {
    max-height: 120vh;
}


/* Desktop */
@media only screen and (min-width: 52rem) {
    .project__header,
    .project__content {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 1rem;
    }

    .project__header:hover {
        opacity: 0.5;
    }

    .project__header__number {
        grid-column: span 2;
    }

    .project__header__title {
        grid-column: span 4;
    }

    .project__header__location{
        display: block;
        grid-column: span 4;
    }

    .project__header__year {
        grid-column: span 2;
        text-align: right;
    }

    .project__content__description {
        grid-column: 7/-1;
        padding: 0 0.5rem 0 0;
        
    }
}

/* Desktop Large */
@media only screen and (min-width: 100rem) {

}



/* 
    Slideshow 
*/

.project__content__slideshow,
.project__content__cover {
    grid-column: span 6;
}

.project__content__cover {
    height: 50vh;
}

.slideshow {
    position: relative;
}

.slideshow__gallery {
    display: flex;
    overflow-x: auto;
    max-height: 100%;
    scroll-padding: 0.75rem;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.slideshow__gallery::-webkit-scrollbar {
    display: none;
}

.slideshow__slide {
    height: 80vw;
    max-height: 100%;
    width: auto;
    object-fit: cover;
    scroll-snap-align: start;
    background-color: rgb(240, 240, 240);
}

/* Desktop */
@media only screen and (min-width: 52rem) {
    .slideshow__gallery {
        scroll-snap-type: x mandatory;
    }

    .slideshow__slide {
        height: 70vh;
    }

    
}

.slideshow__slide {
    margin-left: 0.75rem;
}

.slideshow__slide:last-of-type {
    margin-right: 0.75rem;
}

.slideshow__prev,
.slideshow__next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 15vw;
}

.slideshow__prev {
    left: 0;
    cursor: url("../../icons/arrow-prev-white.svg") 0 0, auto;
}

.slideshow__next {
    right: 0;
    cursor: url("../../icons/arrow-next-white.svg") 0 0, auto;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.project__content__slideshow::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.project__content__slideshow {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}


/* Desktop */
@media only screen and (min-width: 52rem) {
    .project__content__slideshow,
    .project__content__cover {
        grid-column: 1/-1;
    }
}