alternating layout for horizontal timeline

copy-code.json

{"content":[{"id":"cbqhpm","name":"section","parent":0,"children":["uoccov"],"settings":{}},{"id":"uoccov","name":"container","parent":"cbqhpm","children":["jhrajz"],"settings":{"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_alignItems":"center","_gridTemplateColumns":"1fr 1fr 1fr"}},{"id":"jhrajz","name":"xproslider","parent":"uoccov","children":["tovupw"],"settings":{"slideAlignHorizontal":"center","slideAlignVertical":"center","arrows":"true","prevArrow":{"library":"fontawesomeSolid","icon":"fas fa-angle-left"},"nextArrow":{"library":"fontawesomeSolid","icon":"fas fa-angle-right"},"perPage":"6","gap":"20","conditionaljustifyContent":"center","perPage:tablet_portrait":"2","perPage:mobile_landscape":"1","_cssCustom":"/* change item to CSS grid */\n#brxe-jhrajz .brxe-xcontenttimeline .x-content-timeline_list[data-x-horizontal=\"true\"] .x-content-timeline_item {\n    display: grid;\n    grid-template-rows: 1fr auto 1fr;\n}\n\n/* flip order of items on every 2nd slide */\n\n#brxe-jhrajz .x-slider_slide:nth-child(2n) .brxe-xcontenttimeline .x-content-timeline_list[data-x-horizontal=\"true\"] .x-content-timeline_content {\n    order: 2;\n}\n\n#brxe-jhrajz .x-slider_slide:nth-child(2n) .brxe-xcontenttimeline .x-content-timeline_list[data-x-horizontal=\"true\"] .x-content-timeline_meta {\n    order: -1;\n}"},"label":"Pro Slider (CSS)"},{"id":"tovupw","name":"block","parent":"jhrajz","children":["inxewp"],"settings":{"_hidden":{"_cssClasses":"x-slider_slide splide__slide"},"hasLoop":true,"query":{"post_type":["product"]}},"label":"Slide"},{"id":"inxewp","name":"xcontenttimeline","parent":"tovupw","children":["nvdijj"],"settings":{"horizontal":"true","horizontalDirection":"column"}},{"id":"nvdijj","name":"div","parent":"inxewp","children":["vfszcg","qyeimc","vwvmqy"],"settings":{"_hidden":{"_cssClasses":"x-content-timeline_item"}},"label":"Timeline Item"},{"id":"vfszcg","name":"div","parent":"nvdijj","children":["rnfbmk"],"settings":{"_hidden":{"_cssClasses":"x-content-timeline_content"}},"label":"Content (structure)","deletable":false},{"id":"rnfbmk","name":"div","parent":"vfszcg","children":["xwznil"],"settings":{"_hidden":{"_cssClasses":"x-content-timeline_content-inner"}},"label":"Content inner"},{"id":"xwznil","name":"heading","parent":"rnfbmk","children":[],"settings":{"text":"Content here"},"label":"Heading"},{"id":"qyeimc","name":"div","parent":"nvdijj","children":["imyrtu"],"settings":{"_hidden":{"_cssClasses":"x-content-timeline_marker"}},"label":"Marker (structure)","deletable":false},{"id":"imyrtu","name":"div","parent":"qyeimc","children":["jrjejv"],"settings":{"_hidden":{"_cssClasses":"x-content-timeline_marker-inner"}},"label":"Marker inner","deletable":false},{"id":"jrjejv","name":"icon","parent":"imyrtu","children":[],"settings":{"icon":{"icon":"ion-ios-calendar","library":"ionicons"},"_hidden":{"_cssClasses":"x-content-timeline_marker-icon"}},"label":"Icon"},{"id":"vwvmqy","name":"div","parent":"nvdijj","children":[],"settings":{"_hidden":{"_cssClasses":"x-content-timeline_meta"}},"label":"Meta (structure)","deletable":false}],"source":"bricksCopiedElements","sourceUrl":"https://be.local","version":"1.9.6.1","globalClasses":[],"globalElements":[]}

CSS used on slider

/* change item to CSS grid */
%root% .brxe-xcontenttimeline .x-content-timeline_list[data-x-horizontal="true"] .x-content-timeline_item {
display: grid;
grid-template-rows: 1fr auto 1fr;
}

/* flip order of items on every 2nd slide */

%root% .x-slider_slide:nth-child(2n) .brxe-xcontenttimeline .x-content-timeline_list[data-x-horizontal="true"] .x-content-timeline_content {
order: 2;
}

%root% .x-slider_slide:nth-child(2n) .brxe-xcontenttimeline .x-content-timeline_list[data-x-horizontal="true"] .x-content-timeline_meta {
order: -1;
}