/*
** Shop: Posters
*/
&__posters {
    background-color: $color-primary-darker;
    padding: clamp(56px, 10vw, 120px) 20px 72px;
    border-bottom: solid 1px $color-primary-tertiary20 ;

    @include bp (sd) {
        padding: 120px 0;
    }

    // Title
    h3 {
        grid-column: 2 / span 6;
        margin-bottom: 48px;
        font-family: $font-serif;
        color: $color-cream;
        font-size: rem(32px);
        line-height: 1.1;
        text-align: center;

        @include bp (sm) {
            grid-column: 3 / span 14;
            max-width: 360px;
            margin-bottom: 48px;
            font-size: rem(48px);
            text-align: left;
        }
        @include bp (sd) {
            margin-bottom: 0;
        }
    }

    // Posters Set
    .set {
        --gap: 24px;
        grid-column: span calc(var(--columns));
        display: block;
        cursor: grab;

        @include bp (mob-lg) {
            grid-column: 2 / span calc(var(--columns) - 2);
        }
        @include bp (sm) {
            grid-column: 3 / span calc(var(--columns) - 4);
        }
        @include bp (md) {
            cursor: default;
        }

        &.is-dragging {
            cursor: grabbing;
        }

        &__content {
            display: flex;
            margin: 0 -8px;

            @include bp (mob-lg) {
                margin: 0 -12px;
            }
            @include bp (md) {
                --gap: clamp(32px, 2.5vw, 48px);
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: var(--gap);
                margin: 0;
            }
            @include bp (sd) {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        // Poster
        .poster {
            position: relative;
            flex: 0 0 100%;
            margin: 0 12px;

            @include bp (mob-lg) {
                flex: 0 0 calc(50% - 24px);
            }
            @include bp (sm) {
                flex: 0 0 calc(50% - 24px);
            }
            @include bp (md) {
                margin: 0 auto auto;
            }

            // 3 columns
            &:nth-child(1) {
                @include bp (md) {
                    margin-top: calc(var(--gap) * 2);
                }
            }
            &:nth-child(2) {
                @include bp (md) {
                    margin-top: var(--gap);
                }
            }

            // 4 columns
            &:nth-child(4n + 1) {
                @include bp (sd) {
                    margin-top: 64px * 3;
                }
            }
            &:nth-child(4n + 2) {
                @include bp (sd) {
                    margin-top: 64px * 2;
                }
            }
            &:nth-child(4n + 3) {
                @include bp (sd) {
                    margin-top: 64px;
                }
            }
        }

        // Pagination
        &__dots {
            display: flex;
            justify-content: center;
            margin: 32px 0 48px;

            li {
                display: block;
                padding: 4px;
                cursor: pointer;

                // Hover
                &:hover {
                    button {
                        box-shadow: inset 0 0 0 8px $color-tertiary;
                    }
                }
            }
            button {
                display: block;
                width: 8px;
                height: 8px;
                border-radius: 100%;
                background: $color-primary-tertiary20;
                padding: 0;
                transition: box-shadow 1.0s var(--ease-quart);
            }
            .is-active {
                button {
                    box-shadow: inset 0 0 0 8px $color-tertiary;
                }
            }
        }
    }

    // Subscribe
    .subscribe {
        grid-column: 1 / span var(--columns);
        max-width: 380px;
        margin: 56px auto 0;
        text-align: center;

        @include bp (md) {
            grid-column: 14 / span 8;
            margin-top: 0;
            text-align: left;
        }

        &__text {
            display: block;
            font-size: rem(18px);
            color: $color-cream;
            font-weight: 300;
            line-height: 1.5;
            margin-bottom: 24px;

            @include bp (sm) {
                font-size: rem(22px);
                margin-bottom: 30px;
            }
        }

        .newsletter-form {
            padding: 0;
            margin: 0 auto;

            @include bp (sm) {
                margin: 0;
            }

            &__email {
                margin-bottom: 0;
            }
            &__bottom {
                display: none;
            }
        }

    }
}