// Introduction
.intro {
    background-color: $color-tertiary;
    overflow: hidden;

    // Title
    .title-parallax {
        margin-top: -#{pxVW(160)};
        margin-left: -#{pxVW(160)};
    }


    // Description
    &__description {
        margin-bottom: 72px;
        color: $color-text;

        @include breakpoint (sm) {
            margin: 0 auto 120px;
        }

        p {
            margin-bottom: 40px;

            @include breakpoint (sm) {
                margin-bottom: 72px;
            }
        }
    }


    // Carousel
    .carousel {
        position: relative;

        &:after {
            content: "";
            position: absolute;
            z-index: 0;
            top: 0;
            left: 0;
            right: 0;
            display: block;
            width: 100%;
            height: pxVW(768);
            background-color: $color-tertiary;

            @include breakpoint (xxl) {
                height: 820px;
            }
        }

        // Photos
        .gallery__picture:before {
            background-color: $color-secondary;
        }
    }
}


// Explore
.explore--homepage {
    margin-top: pxVW(248);

    @include breakpoint (lg) {
        margin-top: 248px;
    }

    // Description
    .style-description {
        position: relative;
        z-index: 3;
        color: $color-tertiary;
    }

    // Globe
    .globe {
        margin-bottom: -52vh;

        @include breakpoint (xl) {
            margin-bottom: -550px;
        }
    }

    // Browse
    .browse {
        margin-top: 0;
    }

    // Of text
    .of {
        display: flex;
        justify-content: center;
        margin-bottom: pxVW(224);
        font-family: $font-serif-extra;
        font-size: pxVW(248);
        line-height: 1;
        color: $color-lightpurple;
        text-transform: uppercase;
        user-select: none;
        pointer-events: none;

        @include breakpoint (lg) {
            margin-bottom: 200px;
            font-size: rem(248px);
        }

        span {
            will-change: transform;
        }
    }

    // Massive title
    .anim-title {
        margin-top: -#{pxVW(352)};
        margin-left: -60px;

        span:nth-of-type(1) {
            letter-spacing: -6vw;
        }
    }
}