@import '../../../styles/mixins';
@import '../../../styles/grid';
@import '../../../styles/definitions/placeholders';
@import '../../../styles/definitions/breakpoints';

.featuredCustomers {
    &_container {
        padding-top: 15px;

        &--static {
            @include grid-width(10);
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            margin-right: auto;
            margin-left: auto;
        }

        @include media-sm-down {
            padding-top: 12px;

            &--static {
                width: 100%;
            }
        }
    }
    &_title {
        @include title-2;
        align-self: flex-end;
        margin: 0;
    }
    &_slide {
        $slide-padding: 15px;
        $slide-padding-xs: 8px;

        padding: $slide-padding 0;

        &--static {
            $column-width: calc(#{$grid-column-total} / var(--nbColumn, 4));
            @include grid-width(#{$column-width});
        }

        @include media-sm-down {
            padding-top: $slide-padding-xs;
            padding-bottom: $slide-padding-xs;
        }
    }
    &_imageWrapper {
        $image-height: 100px;
        $image-height-xs: 40px;
        $image-padding: 25px;
        $image-padding-xs: 10px;

        display: flex;
        align-items: center;
        justify-content: center;
        height: $image-height;
        padding-left: $image-padding;
        padding-right: $image-padding;

        @include media-sm-down {
            height: $image-height-xs;
            padding-left: $image-padding-xs;
            padding-right: $image-padding-xs;
        }
    }
    &_image {
        max-height: 100%;
        max-width: 100%;

        &--grayscale {
            @extend %filter-grayscale;
        }
    }
}

