// Homepage
.homepage {
    // Site title
    &__title {
        &--houses {
            margin: -20px 0 0;
            color: $color-secondary;
            text-align: center;

            @include bp (sm) {
                margin-top: -100px;
            }
        }
        &--world {
            color: $color-primary-tertiary20;
            text-align: center;

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

    // Intro Section
    &__intro {
        background-color: $color-tertiary;
        color: $color-text;
        text-align: center;
        overflow: hidden;
        padding-bottom: calc(96px + 5vw);

        @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 {
                transition: fill 0.3s;
            }
            .text-split__line {
                &:last-child {
                    color: #fff;
                }
            }

            // Hover
            &:hover {
                background-color: $color-primary-tertiary20;

                svg {
                    fill: $color-tertiary;
                }
            }
        }
    }
        // Text
        &__description {
            max-width: 350px;
            margin: 100px auto 32px;

            @include bp (sm) {
                margin: 20px auto 32px;
                max-width: 524px;
            }
        }

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

        @include bp (sm) {
            margin: calc(-1 * clamp(300px, 20vw, 500px)) auto clamp(64px, 6.5vw, 128px);
        }
    }
    &__collage {
        display: grid;
        grid-template-columns: repeat(16, 1fr);
        grid-template-rows: repeat(3, 1fr);
        margin: 0 -14vw;
        height: 110vw;

        @include bp (sm) {
            grid-template-columns: repeat(32, 1fr);
            grid-template-rows: repeat(2, 1fr);
            margin: 0 -140px;
            height: clamp(400px, 40vw, 800px);
        }

        .photo-card {
            position: relative;
            display: block;
            grid-column-end: span 8;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
            transform: rotate(var(--rotation)) translateZ(0);

            @include bp (sm) {
                height: clamp(156px, 18vw, 400px);
            }

            // First row
            // Mobile: Top left
            &:nth-child(1) {
                --rotation: -10.5deg;
                z-index: 5;
                grid-column-start: 2;
                grid-row: 1;

                @include bp (sm) {
                    z-index: 10;
                    top: clamp(24px, 8vw, 128px);
                }
            }
            // Mobile: Middle left
            &:nth-child(2) {
                --rotation: 3deg;
                z-index: 3;
                grid-column-start: 1;
                grid-row: 2;
                margin-top: -10vw;
                left: -20vw;

                @include bp (sm) {
                    z-index: 7;
                    grid-column-start: 7;
                    grid-row: 1;
                    top: clamp(16px, 3vw, 48px);
                    margin-top: 0;
                    left: 0;
                }
            }
            // Mobile: Middle center
            &:nth-child(3) {
                z-index: 4;
                grid-column-start: 5;
                grid-row: 2;
                margin-top: -12vw;

                @include bp (sm) {
                    z-index: 6;
                    grid-column-start: 13;
                    grid-row: 1;
                    margin-top: 0;
                }
            }
            // Mobile: Middle right
            &:nth-child(4) {
                --rotation: -3deg;
                z-index: 3;
                grid-column-start: 8;
                grid-row: 2;
                margin-top: -7vw;
                left: 20vw;

                @include bp (sm) {
                    z-index: 2;
                    grid-column-start: 19;
                    grid-row: 1;
                    top: clamp(16px, 3vw, 48px);
                    margin-top: 0;
                    left: 0;
                }
            }
            // Mobile: Top right
            &:nth-child(5) {
                --rotation: 10.5deg;
                z-index: 6;
                grid-column-start: 8;
                grid-row: 1;

                @include bp (sm) {
                    z-index: 1;
                    top: clamp(24px, 8vw, 128px);
                    grid-column-start: 24;
                }
            }

            // Second row
            &:nth-child(6) {
                display: none;
                --rotation: -5.5deg;

                @include bp (sm) {
                    display: block;
                    z-index: 9;
                    grid-column-start: 1;
                    grid-row: 2;
                    top: clamp(24px, 5.5vw, 88px);
                }
            }
            &:nth-child(7) {
                display: none;
                --rotation: -8deg;

                @include bp (sm) {
                    display: block;
                    z-index: 8;
                    grid-column-start: 5;
                    grid-row: 2;
                }
            }
            // Mobile: Bottom left
            &:nth-child(8) {
                --rotation: 8deg;
                z-index: 2;
                grid-column-start: 2;
                grid-row: 3;
                margin-top: -16vw;

                @include bp (sm) {
                    z-index: 5;
                    grid-column-start: 11;
                    grid-row: 2;
                    top: calc(-1 * clamp(20px, 3vw, 48px));
                    margin-top: 0;
                }
            }
            // Mobile: Bottom right
            &:nth-child(9) {
                --rotation: -2deg;
                z-index: 1;
                grid-column-start: 8;
                grid-row: 3;
                margin-top: -16vw;

                @include bp (sm) {
                    --rotation: 2deg;
                    z-index: 4;
                    grid-column-start: 15;
                    grid-row: 2;
                    top: calc(-1 * clamp(20px, 3vw, 48px));
                    margin-top: 0;
                }
            }
            &:nth-child(10) {
                --rotation: 8deg;
                display: none;

                @include bp (sm) {
                    display: block;
                    z-index: 3;
                    grid-column-start: 21;
                    grid-row: 2;
                }
            }
            &:nth-child(11) {
                --rotation: 5.5deg;
                display: none;

                @include bp (sm) {
                    z-index: 2;
                    grid-column-start: 25;
                    grid-row: 2;
                    top: clamp(24px, 5.5vw, 88px);
                    margin-right: 0;
                    display: block;
                }
            }

            // Put card in front when hovering
            &:hover {
                z-index: 13;
            }
        }
    }

    // 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;
    }
}