housesof/src/style/pages/_viewer.scss

// Viewer
.viewer {
    position: relative;
    height: 100vh;
    min-height: 560px;
    padding-top: 24px;

    @include breakpoint (sm) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }


    /*
    ** Top part
    */
    &__top {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        margin-top: 16px;
        padding-left: 24px;
        padding-right: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-flow: row wrap;

        @include breakpoint (sm) {
            position: static;
            justify-content: center;
            margin: 24px 0 0;
        }

        // Tip message
        .tip {
            font-family: $font-sans-sb;
            font-size: rem(10px);
            text-transform: uppercase;
            color: rgba($color-tertiary, 0.4);
            letter-spacing: 1px;

            @include breakpoint (sm) {
                display: none;
            }
        }

        // Buttons
        .buttons {
            display: flex;

            a {
                margin-left: 16px;
            }
        }
    }


    /*
    ** Carousel
    */
    .carousel {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-37%);
        margin: 0;

        @include breakpoint (sm) {
            position: static;
            transform: none;
            margin-top: auto;
            margin-bottom: auto;
            width: 85%;
            min-height: 500px;
        }

        // Gallery
        .gallery {
            left: 0;
            right: 0;

            // Specific box shadow for images
            &__images {
                &--photo {
                    box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
                }
            }
        }

        // Informations
        &__infos {
            margin-top: 32px;
            padding: 0 24px;

            @include breakpoint (sm) {
                display: flex;
                justify-content: space-between;
                padding: 0;
            }
        }

        // Location
        &__locations {
            width: 75%;
        }
        &__location {
            text-align: left;
            margin-top: 0;
        }

        // Date
        &__date {
            color: rgba($color-tertiary, 0.5);
            font-size: rem(12px);
            margin-top: 16px;

            @include breakpoint (sm) {
                font-size: rem(14px);
                margin: 0;
            }
        }

        // Photo number
        &__number {
            position: absolute;
            z-index: 1;
            left: 0;
            top: -33.5vw;
            width: 100%;
            font-family: $font-serif-extra;
            font-size: pxVW(672);
            color: rgba($color-tertiary, 0.4);
            text-align: center;
            pointer-events: none;
            user-select: none;

            @include breakpoint (sm) {
                display: block;
                top: auto;
                right: 112px;
                bottom: -240px;
                width: auto;
                font-size: rem(250px);
                text-align: right;
            }
            @include breakpoint (md) {
                bottom: -288px;
                font-size: rem(300px);
            }
        }

        // Dots
        &__dots {
            position: absolute;
            bottom: 24px;
            left: 0;
            right: 0;
            z-index: 20;
        }
    }
}