.sales {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.sales .sale {
	width: calc(33% - 13px);
	padding: 8px;
	box-shadow: var(--baseShadow);
	border-radius: var(--big-radius);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
}

.sales .sale:hover {
	box-shadow: var(--hoverShadow);
}

.sale img {
	display: block;
	border-radius: 24px;
}

.sale .sale-name {
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	padding: 16px 8px 8px 8px;
}

@media (max-width: 991px) {
	.sales .sale {
		width: calc(50% - 13px);
	}
}

@media (max-width: 768px) {
	.sales .sale {
		width: 100%;
	}
}