.house {
    position: relative;

    // Information
    &__info {
        --delay: 0.2s;
        grid-column: 1 / -1;
        margin-bottom: 32px;
        padding: 0 20px;
        overflow: hidden;

        @include bp (mob-lg) {
            max-width: min(540px, 85vw);
        }
        @include bp (sm) {
            grid-column: 6 / span 14;
            margin-bottom: 56px;
            padding: 0;
            max-width: 800px;
        }

        h2 {
            opacity: 0;
            transform: translate3d(0, 25%, 0);
            transition: transform 1.2s var(--ease-quart), opacity 1.2s var(--ease-quart);
            transition-delay: var(--delay);
        }
        .info {
            display: block;
            margin-top: 12px;
            color: $color-lightgray;
            line-height: 1.5;
            opacity: 0;
            transition: opacity 1.2s var(--ease-quart);
            transition-delay: var(--delay);

            @include bp (sm) {
                margin-top: 16px;
            }
            @include bp (md) {
                margin-top: 24px;
            }

            & > * {
                display: inline-block;
            }
            a {
                text-decoration: none;
                color: currentColor;

                &:hover {
                    color: $color-secondary;
                    text-decoration: underline;
                }
            }
            :global(svg) {
                width: 1em;
                height: 1em;
                margin-right: 0.4em;
                margin-bottom: 3px;
            }
            .sep {
                margin: 0 4px;
            }
        }
    }

    // Photo
    &__photo {
        position: relative;
        grid-column: 1 / -1;
        opacity: 0;
        transition: opacity 2s var(--ease-quart);

        & > a {
            grid-column: 1 / -1;
            width: 100%;
            height: 100%;
            text-decoration: none;
            cursor: zoom-in;

            @include bp (sm) {
                grid-column: 3 / span 17;
                grid-row: 1;
            }
        }

        :global(figure) {
            position: relative;
            z-index: 5;
            display: flex;
            justify-content: center;
            height: 100%;
            aspect-ratio: 3 / 2;
            overflow: hidden;
            border-radius: 0;

            @include bp (sm) {
                border-radius: 8px;
            }

            // Aspect-ratio fallback
            @supports not (aspect-ratio: auto) {
                overflow: hidden;
                padding-top: 66.66%;
                height: 0;
            }
        }
        :global(picture) {
            height: 100%;
            border-radius: 0;

            // Aspect-ratio fallback
            @supports not (aspect-ratio: auto) {
                position: absolute;
                width: fit-content;
                top: 0;
                left: 50%;
                height: 100%;
                transform: translateX(-50%);
            }
        }
        :global(img) {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transform: scale3d(1.1, 1.1, 1.1);
            transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart);
            will-change: transform;
        }

        // Variant: Not landscape
        &.not-landscape {
            figure {
                background: $color-cream;
            }
        }

        // Scale down image on hover
        @media (hover: hover) {
            a:hover {
                :global(img) {
                    opacity: 0.7;
                    transform: scale3d(1.03, 1.03, 1.03);
                    transition-duration: 1.2s;
                }
            }
        }
    }

    // Photo number
    &__index {
        position: absolute;
        z-index: 1;
        bottom: -64px;
        right: 20px;
        display: block;
        text-align: right;
        pointer-events: none;
        user-select: none;

        @include bp (sm) {
            --offset: 1.75vw;
            position: relative;
            grid-column: 19 / span 6;
            grid-row: 1;
            white-space: nowrap;
            bottom: auto;
            right: auto;
            align-self: center;
            text-align: left;
            transform: translate3d(var(--offset), 0, 0);
        }
        @include bp (fhd) {
            --offset: 2.5vw;
        }

        // Specific cases
        &.has-one-start {
            @include bp (sm) {
                transform: translate3d(calc(15% + var(--offset)), 0, 0);
            }
        }
    }

    // Even photos
    &:nth-child(even) {
        .house {
            // Photo
            &__photo {
                & > a {
                    @include bp (sm) {
                        grid-column: 6 / span 17;
                        grid-row: 1;
                    }
                }
            }
            // Info
            &__info {
                @include bp (sm) {
                    margin-left: auto;
                    text-align: right;
                }
            }
            &__index {
                @include bp (sm) {
                    grid-column-start: 1;
                    text-align: right;
                    transform: translate3d(calc(-1 * var(--offset)), 0, 0);
                }

                // Specific cases
                &.has-one-start {
                    @include bp (sm) {
                        transform: translate3d(calc(-8% - var(--offset)), 0, 0);
                    }
                }
                &.has-one-end {
                    @include bp (sm) {
                        transform: translate3d(calc(-15% - var(--offset)), 0, 0);
                    }
                }
            }
        }
    }
}

// Visible state
:global(.is-visible) {
    .house__info {
        h2 {
            opacity: 1;
            transform: translate3d(0,0,0);
        }
        .info {
            opacity: 1;
        }
    }
    .house__photo {
        opacity: 1;

        :global(img) {
            transform: scale3d(1.01, 1.01, 1.01);
        }
    }
}