.photos {
    position: relative;
    margin-top: -22px;
    background-color: #fff;

    @include breakpoint (sm) {
        margin-top: -128px;
        padding-top: 88px;
    }
    @include breakpoint (xl) {
        padding-top: 72px;
    }

    // Sidebar
    &__side {
        display: none;

        @include breakpoint (md) {
            display: flex;
            position: absolute;
            z-index: 5;
            left: 24px;
            flex-direction: row-reverse;
            align-items: flex-end;
            transform-origin: left top;
            transform: rotate(-90deg) translateX(-100%);
        }

        // Container
        &--wrap {
            @include breakpoint (md) {
                position: sticky;
                z-index: 10;
                top: 16px;
                height: 100%;
            }
            @include breakpoint (xl) {
                top: 32px;
            }
        }

        p {
            font-size: rem(12px);
            color: $color-lightgray;
            margin-right: 24px;

            strong {
                font-weight: 600;
                display: block;
                text-align: right;
            }
        }
    }

    // Each photo
    .photo {
        position: relative;
        z-index: 4;
        margin-bottom: 104px;

        @include breakpoint (sm) {
            margin-bottom: 120px;
        }

        // Last photo doesn't need spacing
        &:last-child {
            margin-bottom: 0;
        }
    }


    /*
    ** List view
    */
    &--list {
        .photos__view {
            max-width: 100%;
            margin: 0;
            padding: 0;
        }

        // Photo
        .photo {
            @include breakpoint (sm) {
                // Even photos
                &:nth-child(even) {
                    // Location
                    .photo__location, h2 {
                        text-align: right;
                    }

                    // Image
                    .photo__image {
                        justify-content: flex-end;

                        &--date {
                            right: 100%;
                            left: -30px;
                        }
                        &--number {
                            right: 77%;
                            left: auto;
                            text-align: right;
                        }
                    }
                }
            }

            // Number
            &__image--number {
                transform: translate(-50%, var(--translate));
                will-change: transform;
            }
        }

        // Pagination
        .pagination {
            margin-top: 104px;

            @include breakpoint (sm) {
                margin-top: -64px;
            }
        }
    }


    /*
    ** Grid view
    */
    &--grid {
        .photos__view {
            @include breakpoint (md) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-column-gap: 48px;
                grid-row-gap: 72px;
                padding-left: 192px;
                padding-right: 64px;
            }
            @include breakpoint (xxl) {
                padding-left: 192px;
            }
            @include breakpoint (1776px) {
                padding-right: 0;
            }
        }

        // Photo
        .photo {
            display: flex;
            flex-direction: column-reverse;
            margin-bottom: 40px;

            @include breakpoint (m) {
                margin-bottom: pxVW(176);
            }
            @include breakpoint (md) {
                margin-bottom: 0;
            }

            // Every second (on column 2)
            &:nth-child(2n+2) {
                @include breakpoint (md) {
                    transform: translateY(-64px);
                }
            }

            .wrap, .wrapper {
                padding: 0;
                margin: 0;
            }

            // Location
            &__location {
                text-align: left;

                h2 {
                    font-size: rem(28px);
                    margin-top: 28px;
                    white-space: normal;
                }

                p {
                    font-size: rem(12px);
                    margin-top: 8px;
                }
            }

            // Image
            &__image {
                &--img {
                    border-radius: 8px;
                }
                &--number {
                    font-size: rem(96px);
                    bottom: -88px;
                    right: 24px;
                    z-index: 1;
                    transform: none;
                    top: auto;
                    left: auto;
                }
                &--date {
                    display: none;
                }
            }
        }

        // Pagination
        .pagination {
            margin-top: 64px;
        }
    }
}