File: D:/HostingSpaces/slenders/slenders.nl/resources/sass/site/6-Organisms/_organisms.brands.scss
$brandsGap: 30;
$brandsItemsEachRow: 2;
.o-brands {
padding-bottom: 30px;
@include mq(1200) {
width: column(10, 12);
margin: auto;
}
}
.o-brands__title {
@include font(mid-large, 29, medium);
color: palette(primary, 700);
}
.o-brands__title ~ .o-brands__subtitle {
margin-top: 15px;
}
.o-brands__heading {
margin-bottom: 40px;
@include mq(m) {
margin-bottom: 80px;
}
}
.o-brands__grid {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin: -#{$brandsGap}px;
}
.o-brands__item {
margin: #{$brandsGap}px;
width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
text-align: center;
@include mq(475) {
$brandsItemsEachRow: 3;
width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
}
@include mq(650) {
$brandsItemsEachRow: 4;
width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
}
@include mq(1000) {
$brandsItemsEachRow: 5;
width: calc((100% - #{$brandsGap * ($brandsItemsEachRow * 2)}px) / #{$brandsItemsEachRow});
}
}