.#{$namespace}styleguide {
    $root: &;

    &__main-title {
        color: darken($colorAlto, 15%);
        font-weight: 700;
        padding-bottom: 2rem;
        font-size: 4rem;
        border-bottom: 1px solid $colorAlto;
        max-width: 120rem;
        margin: 6rem auto 7rem;
    }

    &__title {
        height: 4.5rem;
        color: darken($colorAlto, 15%);
        font-weight: 300;
        font-size: 3.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid $colorAlto;
        max-width: 120rem;
        margin: 5rem auto 3rem;
    }

    &__container {
        padding-top: 1rem;
        padding-bottom: 4rem;

        &--contrast {
            box-shadow: inset 0 7rem 7rem -7rem rgba(0, 0, 0, 0.1),
                inset 0 -7rem 7rem -7rem rgba(0, 0, 0, 0.1);
        }
    }

    &__section {
        align-content: flex-start;
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        padding: 0 3rem;
        max-width: 120rem;
        margin: 0 auto;

        > * {
            //stylelint-disable-line
            margin: 0.5rem 1rem;
        }

        > *:first-child {
            //stylelint-disable-line
            margin-left: 0;
        }

        &--columns {
            > * {
                //stylelint-disable-line
                width: 100%;
                margin: 2rem 0;
                box-sizing: border-box;

                @include media('>=tablet') {
                    width: 47%;
                    margin: 2rem 0;
                    margin-right: 3%;
                }

                @include media('>=desktop') {
                    width: 30%;
                }
            }
        }

        &--wide {
            > * {
                //stylelint-disable-line
                width: 100%;
                margin: 1.5rem 0;
            }
        }

        &--block {
            display: block;

            > *:first-child {
                //stylelint-disable-line
                margin-left: 1rem;
            }
        }

        &--space {
            margin-top: 2rem;

            > * {
                //stylelint-disable-line
                margin: 2.5rem 1rem;
            }
        }
    }

    &__separator {
        width: 100%;
        height: 2px;
        background: $colorGallery;
        max-width: 120rem;
        margin: 2rem auto;
    }

    &__wrapper {
        display: flex;
        flex-wrap: wrap;
    }

    &__box-wrapper {
        &--small {
            margin: 5px !important;

            #{$root}__box {
                width: 10rem;
                height: 9rem;
                background: $colorGallery;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            #{$root}__box-text {
                text-align: center;
            }
        }
    }

    &__box {
        width: 9rem;
        height: 9rem;
    }

    &__box-text {
        margin-top: 0.6rem;
        font-size: 1.2rem;
        text-align: left;
    }

    &__box-group {
        margin-right: 2rem;
        display: flex;
    }

    &__icon {
        margin: 1.5rem;
        max-width: 2.5rem;
        max-height: 2.5rem;
    }
}