:root {
	--small: 20px;
	--medium: 40px;
	--large: 60px;
	--xl: 80px;
	--padding-x: 10px;
}

@media(min-width: 768px) {
	:root {
		--small: 30px;
		--medium: 50px;
		--large: 70px;
		--xl: 90px;
	}
	
}

@media(min-width: 1280px) {
	:root {
		--small: 40px;
		--medium: 60px;
		--large: 80px;
		--xl: 100px;
	}
}

.custom-block {
	&.mt-none { margin-top: 0 }
	&.mt-small { margin-top: var(--small) }
	&.mt-medium { margin-top: var(--medium) }
	&.mt-large { margin-top: var(--large) }
	&.mt-xl { margin-top: var(--xl) }
	&.mb-none { margin-bottom: 0 }
	&.mb-small { margin-bottom: var(--small) }
	&.mb-medium { margin-bottom: var(--medium) }
	&.mb-large { margin-bottom: var(--large) }
	&.mb-xl { margin-bottom: var(--xl) }
}
.container-flex {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--padding-x);
	padding-right: var(--padding-x);
	gap: 40px;
	&.w-small { max-width: 768px }
	&.w-medium { max-width: 1024px }
	&.w-large { max-width: 1280px }
	&.pt-none { padding-top: 0 }
	&.pt-small { padding-top: var(--small) }
	&.pt-medium  { padding-top: var(--medium) }
	&.pt-large  { padding-top: var(--small) }
	&.pt-xl  { padding-top: var(--xl) }
	&.pb-none { padding-bottom: 0 }
	&.pb-small  { padding-bottom: var(--small) }
	&.pb-medium { padding-bottom: var(--medium) }
	&.pb-large { padding-bottom: var(--largel) }
	&.pb-large { padding-bottom: var(--xl) }
	
	@media (max-width: 767px) {
		&.col-reverse { flex-direction: column-reverse; }
	}
	
	@media (min-width: 768px) {
		flex-direction: row;
		&.items-au-centre { align-items: center; }
		&.items-en-haut { align-items: flex-start; }
		&.items-en-bas { align-items: flex-end; }
		
		&.w50-w50 > div { width: 50%; }
		&.w33-w67 > div:first-child { width: 33% }
		&.w33-w67 > div:last-child { width: 67% }
		&.w67-w33 > div:first-child { width: 67% }
		&.w67-w33 > div:last-child { width: 33% }
	}
}