.textimage-container { --gap: 2rem; display: flex; flex-direction: column; gap: var(--gap); } .textimage-wrapper { width: 100%; } .textimage-text { font-size: 1rem; line-height: 1.5; } .textimage-image-wrapper { display: flex; align-items: center; justify-content: center; } .textimage-picture { display: block; max-width: 100%; } .textimage-image { max-width: 100%; height: auto; border-radius: 0.5rem; display: block; } /* Image positions: 25 = left, 26 = right */ .textimage-container.image-pos-25 { flex-direction: column; } .textimage-container.image-pos-26 { flex-direction: column; } /* On larger screens, arrange horizontally for image position settings */ @media (min-width: 768px) { .textimage-container.size-25 { --gap: 8rem; } .textimage-container.image-pos-25 { flex-direction: row; } .textimage-container.image-pos-26 { flex-direction: row-reverse; } .textimage-image-wrapper.size-25 { flex: 0 0 calc(40% - (var(--gap) / 2)); max-width: calc(40% - (var(--gap) / 2)); } .textimage-wrapper.size-25 { flex: 0 0 calc(40% - (var(--gap) / 2)); max-width: calc(40% - (var(--gap) / 2)); } .textimage-image-wrapper.size-50 { flex: 0 0 calc(50% - (var(--gap) / 2)); max-width: calc(50% - (var(--gap) / 2)); } .textimage-wrapper { flex: 1; } }