.logo-grid {
	padding: 0 var(--space-5) 30px;
	margin-bottom: 30px;
}

.logo-grid .title {
	margin-bottom: var(--space-5);
	font-family: var(--font-roboto);
	font-weight: var(--font-weight-bold);
	font-size: 40px;
	line-height: 48px;
	text-align: center;
	color: var(--black);
}

@media screen and (min-width: 40em) {
	.logo-grid {
		max-width: var(--width-base);
		padding: 0 var(--space-20);
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.logo-grid .title {
		font-size: 50px;
		line-height: 60px;
	}
}

@media screen and (min-width: 64em) {
	.logo-grid {
		margin-bottom: 50px;
	}
	.logo-grid .title {
		font-size: 60px;
	}
}

.logo-grid .description {
	max-width: 736px;
	margin: 0 auto 30px;
	font-family: var(--font-roboto);
	font-weight: var(--font-weight-normal);
	font-size: var(--text-base);
	text-align: center;
	line-height: 30px;
	color: var(--gray-dark);
}

@media screen and (min-width: 40em) {
	.logo-grid .description {
		font-size: var(--text-xl);
	}
}

.logo-grid .content-section {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		align-items: center;
		gap: 30px;

}

.logo-grid .content-section .slide {
	display: flex;
	justify-content: center;
}

.logo-grid .content-section img {
	width: 123px;
	height: 100px;
	object-fit: contain;
	margin-bottom: 16px;
}

@media screen and (min-width: 25em) {
	.logo-grid .content-section img {
		width: 144px;
		height: 100px;
	}
}

@media screen and (min-width: 40em) {
	
	.logo-grid .content-section img {
		width: unset;
		height: 144px;
	}
	.logo-grid .content-section .slide {
		width: unset;
		flex-basis: 20%;
	}
}

@media screen and (min-width: 64em) {
	.logo-grid .content-section img {
		width: 200px;
		height: 144px;
	}
}