/* Module CSS */
.module {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	container-type: inline-size;
}
.module__text {
	flex: 0 0 auto;
}
.module__image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	flex: 0 0 auto;
}

/* Width classes */
.has-image-col-25 .module__image {
	flex-basis: 25%;
}
.has-image-col-25 .module__text {
	flex-basis: 75%;
}
.has-image-col-33 .module__image {
	flex-basis: 33%;
}
.has-image-col-33 .module__text {
	flex-basis: 67%;
}
.has-image-col-50 .module__image {
	flex-basis: 50%;
}
.has-image-col-50 .module__text {
	flex-basis: 50%;
}


/* Position */
.image-right .module__image {
	order: 1;
}
.image-left .module__image {
	order: 0;
}
.image-right .module__text {
	order: 0;
}
.image-left .module__text {
	order: 1;
}
.has-image-top-2-1 {
	flex-direction: column;
}
.has-image-top-2-1 .module__image {
	order: -1;
	flex: 2 1 auto;
	width: 100%;
	aspect-ratio: 4 / 1;
}

/* Alignment */
.bg-align-left .module__image {
	background-position-x: left;
}
.bg-align-center .module__image {
	background-position-x: center;
}
.bg-align-right .module__image {
	background-position-x: right;
}
.bg-valign-top .module__image {
	background-position-y: top;
}
.bg-valign-center .module__image {
	background-position-y: center;
}
.bg-valign-bottom .module__image {
	background-position-y: bottom;
}

/* Viewport media query (max-width: 640px) */
@media (max-width: 640px) {
	.module {
		flex-direction: column;
	}
	.module__text {
		order: 0;
		width: 100%;
		flex: 1 1 auto;
	}
	.module__image {
		order: 1;
		width: 100%;
		flex: 2 1 auto;
	}
}

/* Container query: quando .module è più stretto di 480px */
@container (max-width: 480px) {
	.module__image {
		display: none !important;
	}
	.module__text {
		order: 0 !important;
		width: 100% !important;
		flex: 1 1 100% !important;
	}
}