// Homepage
.homepage {
    // Site title
    &__title {
        // Houses
        &--houses {
            display: inline-flex;
            margin: -28px 0 0;
            color: $color-secondary;
            text-align: center;

            @include bp (sm) {
                margin-top: calc(-1 * clamp(24px, 5vw, 104px));
            }

            .text-split {
                margin-left: calc(-1 * clamp(24px, 5vw, 64px));
            }
            span {
                transition: none;
                letter-spacing: -0.06em;
            }
        }
        // World
        &--world {
            min-width: 100%;
            display: inline-flex;
            color: $color-primary-tertiary20;
            text-align: center;

            @include bp (sm) {
                margin-top: calc(-1 * clamp(120px, 10vw, 216px));
            }

            span:first-child {
                margin-right: -0.075em;
            }
        }
    }

    // Intro Section
    &__intro {
        overflow: hidden;
        padding-bottom: calc(96px + 20vw);
        background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
        color: $color-text;
        text-align: center;

        @include bp (sm) {
            padding-bottom: calc(280px + 10vw);
        }

        // Button
        .button {
            $color-shadow: rgba($color-shadow-brown, 0.05);
            box-shadow:
                0 1px 1px $color-shadow,
                0 2px 2px $color-shadow,
                0 4px 4px $color-shadow,
                0 16px 16px $color-shadow;
            margin-bottom: 40px;

            svg {
                width: 24px;
                height: 24px;
                color: $color-gray;
            }
            .text-split__line {
                &:last-child {
                    color: #fff;
                }
            }

            // Hover
            &:hover {
                background-color: $color-primary-tertiary20;
            }
        }
    }
        // Headline
        &__headline {
            max-width: 350px;
            margin: clamp(24px, 10vw, 96px) auto 0;

            @include bp (sm) {
                max-width: 524px;
                margin-top: 24px;
            }

            p {
                margin-bottom: 24px;

                @include bp (sm) {
                    margin-bottom: 32px;
                }
            }
        }

    // Photos Collage
    &__photos {
        position: relative;
        max-width: 2000px;
        margin: calc(-1 * 96px - 4vw) 0 80px;

        @include bp (sm) {
            margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);
        }
    }

    // CTAS
    &__ctas {
        text-align: center;
        margin-bottom: 96px;

        @include bp (sm) {
            margin-bottom: 160px;
        }

        .cards {
            justify-content: center;
            margin-top: 48px;

            @include bp (sm) {
                display: flex;
                margin-top: 72px;
            }

            & > * {
                margin: 20px auto 0;

                @include bp (sm) {
                    margin: 0 16px;
                }
            }
        }
    }

    // World title
    .title-world {
        color: rgba($color-tertiary, 0.3);
        margin-top: -60px;
    }
}