housesof/src/style/pages/_homepage.scss

// 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: clamp(250px, 27vw, 600px);

        // Button
        .button {
            box-shadow: 0 1px 1px rgba($color-shadow-brown, 0.05), 0 2px 2px rgba($color-shadow-brown, 0.05), 0 4px 4px rgba($color-shadow-brown, 0.05), 0 16px 16px rgba($color-shadow-brown, 0.05);
            margin-bottom: 40px;
        }
    }
        // 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;
        height: clamp(400px, 45vw, 900px);
        margin: calc(-1 * clamp(200px, 20vw, 500px)) auto 0;

        @include bp (sm) {
            margin: calc(-1 * clamp(300px, 20vw, 500px)) auto 0;
        }
    }
    &__collage {
        display: grid;
        grid-template-columns: repeat(32, 1fr);
        grid-template-rows: repeat(2, 1fr);
        margin: 0 -140px;

        .photo-card {
            position: relative;
            display: block;
            grid-column-end: span 8;
            height: clamp(133px, 18vw, 400px);
            margin-left: auto;
            margin-right: auto;
            transform: rotate(var(--rotation)) translateZ(0);

            // First row
            &:nth-child(1) {
                display: none;
                --rotation: -10.5deg;
                z-index: 11;
                grid-column-start: 2;
                grid-row: 1;
                top: clamp(24px, 8vw, 128px);

                @include bp (sm) {
                    display: block;
                }
            }
            &:nth-child(2) {
                --rotation: 3deg;
                z-index: 7;
                grid-column-start: 7;
                grid-row: 1;
                margin-left: 0;
                top: clamp(16px, 3vw, 48px);
            }
            &:nth-child(3) {
                z-index: 6;
                grid-column-start: 13;
                grid-row: 1;
            }
            &:nth-child(4) {
                --rotation: -3deg;
                z-index: 2;
                grid-column-start: 19;
                grid-row: 1;
                top: clamp(16px, 3vw, 48px);
            }
            &:nth-child(5) {
                --rotation: 10.5deg;
                display: none;
                z-index: 1;
                grid-column-start: 24;
                grid-row: 1;
                top: clamp(24px, 8vw, 128px);

                @include bp (sm) {
                    display: block;
                }
            }

            // Second row
            &:nth-child(6) {
                --rotation: -5.5deg;
                display: none;
                z-index: 10;
                grid-column-start: 1;
                grid-row: 2;
                top: clamp(24px, 5.5vw, 132px);

                @include bp (sm) {
                    display: block;
                }
            }
            &:nth-child(7) {
                --rotation: -8deg;
                grid-column-start: 5;
                z-index: 9;
                grid-row: 1;

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

                @include bp (sm) {
                    display: block;
                }
            }
            &:nth-child(11) {
                --rotation: 5.5deg;
                display: none;
                z-index: 2;
                grid-column-start: 25;
                grid-row: 2;
                top: clamp(24px, 5.5vw, 132px);
                margin-right: 0;

                @include bp (sm) {
                    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;
    }
}