.module-brand .component-wrapper {
    position: relative;
	z-index: 3;
}

.module-brand .component-wrapper {
    position: relative;
    display: block;
    width: 100%;
	height: fit-content;
    background-color: var(--softGrey);
    /*padding-bottom: 10.41vw;*/
    padding-bottom: 14.41vw;
    transition: background .4s ease;
	-webkit-transition: background .4s ease;
	-moz-transition: background .4s ease;
	-o-transition: background .4s ease;
}

body.dark .module-brand .component-wrapper {
    background-color: var(--black);
}

.module-brand .component-wrapper .columns {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
	height: auto;
    column-gap: var(--columnGap);
    row-gap: var(--columnGap);
    /*padding: 8.64vw var(--lateralMargin) 8.64vw;*/
    padding: 8.64vw var(--lateralMargin) 12.64vw;
}


.module-brand .component-wrapper .columns .column-inner {
    position: relative;
    display: block;
    width: calc(33.33% - (var(--columnGap) * .67 ) );
	height: 44.01vw;
    overflow: hidden;
}

.module-brand .carousel-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: fit-content;
    overflow: hidden;
    pointer-events: none;
}

.module-brand .carousel-wrapper.active {
    pointer-events: all;
}

.module-brand .carousel-wrapper .swiper-wrapper {
    position: relative;
    width: 100%;
    height: fit-content;
}

.module-brand .carousel-wrapper .swiper-slide {
    position: relative;
    display: flex;
    flex-flow: column;
    row-gap: 1.562vw;
    height: fit-content;
    width: calc( ( (100vw - ( var(--lateralMargin) * 2) ) / 3 ) - (var(--columnGap) * .67 ) );
    height: fit-content;
    margin-left: var(--columnGap);
}

.module-brand .carousel-wrapper .swiper-slide:first-child {
    margin-left: var(--lateralMargin);
}

.module-brand .carousel-wrapper .swiper-slide:last-child {
    margin-right: var(--lateralMargin);
}

.module-brand .carousel-wrapper .swiper-slide .image-inner {
    position: relative;
    width: 100%;
    height: 36.9vw;
}

.module-brand .carousel-wrapper .swiper-slide .title {
    opacity: 0;
}

.module-brand .carousel-wrapper.active .swiper-slide .title {
    opacity: 1;
}


@media only screen and (max-width: 900px) {
    .module-brand .carousel-wrapper {
        pointer-events: all;
    }

    .module-brand .carousel-wrapper .swiper-slide {
        width: 55vw;
    }

    .module-brand .carousel-wrapper .swiper-slide .image-inner {
        height: 66.1vw;
    }

    .module-brand .carousel-wrapper .swiper-slide .title {
        opacity: 1;
    }
}


@media only screen and (max-width: 740px) {
    .module-brand .component-wrapper .columns {
        padding: 14.64vw var(--lateralMargin) 20.8vw;
    }

    .module-brand .component-wrapper .columns .column-inner {
        width: calc(50% - (var(--columnGap) * .51 ) );
        height: 60.35vw;
    }

    .module-brand .carousel-wrapper .swiper-slide {
        width: 65vw;
    }

    .module-brand .carousel-wrapper .swiper-slide .image-inner {
        height: 78.9vw;
    }
}


@media only screen and (max-width: 550px) {

    .module-brand .component-wrapper {
        /*padding-bottom: 0;*/
        padding-bottom: 26.41vw;
    }

    .module-brand .carousel-wrapper .swiper-slide {
        width: 72vw;
        row-gap: 4.2vw;
    }

    .module-brand .carousel-wrapper .swiper-slide .image-inner {
        height: 87.1vw;
    }

    .module-brand .carousel-wrapper .swiper-slide .title {
        font-size: 2.1rem;
    }
}