@mixin carrousel() {
    width: 592px;
    height: 340px;
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;

    &__button {
        position: absolute;
        display: block;
        width: 40px;
        height: 40px;
        top: 140px;
        background-color: transparent;
        border: 0;
        outline: 0;
        font-size: em(24px);
        text-align: center;
        z-index: 3;

        &:hover {
            cursor: pointer;
            color: color('primary');
        }

        &--prev {
            left: 0;
        }

        &--next {
            right: 0;
        }
    }

    &__container,
    &__container__wrapper {
        position: relative;
        height: 100%;
        transform: translate3d(0px,0px,0);
        transition: transform $animation-duration $swiftOut; 
        will-change: transform;

        &__item {
            position: relative;
            @include inline-flex();
            @include flex-column();
            @include align-items-center();
            @include justify-content-center();
            width: 100%;
            height: 100%;
            padding: 26px;

            &__thumbnail {
                svg {
                    display: block;
                    width: auto;
                    height: 188px;
                    margin: 0 auto;
                }
            }

            &__title,
            &__content {
                width: 100%;
                margin: 0 auto;
                text-align: center;
                white-space: normal;
            }

            &__title {
                margin-top: auto;
                margin-bottom: 8px;
                @include font("IntervalNextMed");
                font-size: em(19px);
                line-height: 22px;
            }

            &__content {
                max-width: 454px;
                @include font("IntervalNextBook");
                font-size: em(16px);
                line-height: 19px;
            }
        }
    }
}