:root {
	--brand-image-height: 50px;
	--brand-horizontal-gap: 50px;
	--brand-vertical-gap: 20px;
}

section.brand .popular_brands {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	height: calc(var(--brand-image-height) * 2 + var(--brand-vertical-gap));
	justify-content: space-around;
	box-sizing: content-box;
	position: relative;
	gap: var(--brand-vertical-gap) var(--brand-horizontal-gap);
}

section.brand .popular_brands a {
	height: var(--brand-image-height);
	box-sizing: border-box;
}

section.brand .popular_brands img {
	height: var(--brand-image-height);
	max-width: 250px;
}

section.brand .popular_brands::before,
section.brand .popular_brands::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--section-padding);
	background-color: white;
	z-index: 1;
}

section.brand .popular_brands::before {
	top: 0;
}

section.brand .popular_brands::after {
	bottom: 0;
}

@media only screen and (min-width: 40.0625em) {
	section.brand .popular_brands {
		height: var(--brand-image-height);
	}
}