/* UX Five Columns — anchos en quintos para columnas de Flatsome.
 * Breakpoints de Flatsome: small < 550px, medium 550–849px, large >= 850px.
 * Cada clase se limita a su rango porque Flatsome siempre imprime large-N y medium-N.
 */

/* Móvil */
@media screen and (max-width: 549.98px) {
	body .col.small-fifth-1 { flex-basis: 20%; max-width: 20%; }
	body .col.small-fifth-2 { flex-basis: 40%; max-width: 40%; }
	body .col.small-fifth-3 { flex-basis: 60%; max-width: 60%; }
	body .col.small-fifth-4 { flex-basis: 80%; max-width: 80%; }
}

/* Tablet */
@media screen and (min-width: 550px) and (max-width: 849.98px) {
	body .col.medium-fifth-1 { flex-basis: 20%; max-width: 20%; }
	body .col.medium-fifth-2 { flex-basis: 40%; max-width: 40%; }
	body .col.medium-fifth-3 { flex-basis: 60%; max-width: 60%; }
	body .col.medium-fifth-4 { flex-basis: 80%; max-width: 80%; }
}

/* Escritorio */
@media screen and (min-width: 850px) {
	body .col.large-fifth-1 { flex-basis: 20%; max-width: 20%; }
	body .col.large-fifth-2 { flex-basis: 40%; max-width: 40%; }
	body .col.large-fifth-3 { flex-basis: 60%; max-width: 60%; }
	body .col.large-fifth-4 { flex-basis: 80%; max-width: 80%; }
}

/* Vista previa de UX Builder (el valor ya corresponde al dispositivo activo) */
body .col.uxf-fifth-1 { flex-basis: 20%; max-width: 20%; }
body .col.uxf-fifth-2 { flex-basis: 40%; max-width: 40%; }
body .col.uxf-fifth-3 { flex-basis: 60%; max-width: 60%; }
body .col.uxf-fifth-4 { flex-basis: 80%; max-width: 80%; }