.modul.media-text-modul { display: flex; flex-direction: column; gap: var(--bitv-gap-module, 24px); width: 100%; max-width: 100%; } .modul.media-text-modul>* { margin: 0; } .modul.media-text-modul .e_headline { order: 1; width: 100%; align-self: start; padding-left: 0; padding-right: 0; } .modul.media-text-modul .media-block { order: 2; width: 100%; max-width: 708px; } .modul.media-text-modul .block-text:not(.ap-daten), .modul.media-text-modul .app-text { order: 3; width: 100%; align-self: start; padding-left: 0; padding-right: 0; } .modul.media-text-modul .modul-button, .modul.media-text-modul .ap-daten, .modul.media-text-modul .app-buttons { order: 4; width: 100%; align-self: start; padding-left: 0; padding-right: 0; } @media (min-width: 768px) { .modul.media-text-modul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; } .modul.media-text-modul>* { width: 100%; max-width: calc(612px - var(--bitv-gap-module, 24px) / 2); } .media-text-modul .e_headline { grid-row: 1; } .media-text-modul .block-text:not(.ap-daten), .media-text-modul .app-text { grid-row: 2; } .media-text-modul .modul-button, .media-text-modul .ap-daten, .media-text-modul .app-buttons { grid-row: 3; } .media-left .e_headline, .media-left .block-text:not(.ap-daten), .media-left .app-text, .media-left .modul-button, .media-left .ap-daten, .media-left .app-buttons { grid-column: 2; } .media-right .e_headline, .media-right .block-text:not(.ap-daten), .media-right .app-text, .media-right .modul-button, .media-right .ap-daten, .media-right .app-buttons { grid-column: 1; justify-self: end; } .wp-block-bitv-image-text.modul.image-text:not(:has(> .modul-button)), .wp-block-bitv-text-image.modul.text-image:not(:has(> .modul-button)), .wp-block-bitv-text-video-modul.modul.text-video:not(:has(> .modul-button)), .wp-block-bitv-video-text-modul.modul.video-text:not(:has(> .modul-button)), .wp-block-bitv-app-img-modul.modul.app-modul:not(:has(> .app-buttons)), .wp-block-bitv-img-app-modul.modul.app-modul:not(:has(> .app-buttons)), .wp-block-bitv-image-ap.modul.image-text:not(:has(> .block-text:not(.ap-daten))), .wp-block-bitv-ap-image.modul.text-image:not(:has(> .block-text:not(.ap-daten))) { grid-template-rows: auto 1fr; } .modul.media-text-modul:not(:has(> .e_headline)) { grid-template-rows: auto 1fr; } .modul.media-text-modul:not(:has(> .e_headline)) .block-text:not(.ap-daten), .modul.media-text-modul:not(:has(> .e_headline)) .app-text { grid-row: 1; } .modul.media-text-modul:not(:has(> .e_headline)) .modul-button, .modul.media-text-modul:not(:has(> .e_headline)) .ap-daten, .modul.media-text-modul:not(:has(> .e_headline)) .app-buttons { grid-row: 2; } .modul.media-text-modul:not(:has(> .e_headline)):not(:has(> .modul-button)) .block-text, .modul.media-text-modul:not(:has(> .e_headline)):not(:has(> .app-buttons)) .app-text, .modul.media-text-modul:not(:has(> .e_headline)):not(:has(> .block-text:not(.ap-daten))) .ap-daten { grid-row: 1; } .wp-block-bitv-image-text.modul.image-text:not(:has(> .e_headline)):not(:has(> .modul-button)), .wp-block-bitv-text-image.modul.text-image:not(:has(> .e_headline)):not(:has(> .modul-button)), .wp-block-bitv-text-video-modul.modul.text-video:not(:has(> .e_headline)):not(:has(> .modul-button)), .wp-block-bitv-video-text-modul.modul.video-text:not(:has(> .e_headline)):not(:has(> .modul-button)), .wp-block-bitv-app-img-modul.modul.app-modul:not(:has(> .e_headline)):not(:has(> .app-buttons)), .wp-block-bitv-img-app-modul.modul.app-modul:not(:has(> .e_headline)):not(:has(> .app-buttons)), .wp-block-bitv-image-ap.modul.image-text:not(:has(> .e_headline)):not(:has(> .block-text:not(.ap-daten))), .wp-block-bitv-ap-image.modul.text-image:not(:has(> .e_headline)):not(:has(> .block-text:not(.ap-daten))) { grid-template-rows: 1fr; } .modul.media-text-modul .media-block { grid-row: 1 / span 3; position: relative; width: calc(100% + var(--bitv-gap-module)); align-self: start; } .media-left .media-block { grid-column: 1; justify-self: end; } .media-right .media-block { grid-column: 2; justify-self: start; } .wp-block-bitv-image-text.modul.image-text:not(:has(> .modul-button)) .media-block, .wp-block-bitv-image-text.modul.image-text:not(:has(> .e_headline)) .media-block, .wp-block-bitv-text-image.modul.text-image:not(:has(> .modul-button)) .media-block, .wp-block-bitv-text-image.modul.text-image:not(:has(> .e_headline)) .media-block, .wp-block-bitv-text-video-modul.modul.text-video:not(:has(> .modul-button)) .media-block, .wp-block-bitv-text-video-modul.modul.text-video:not(:has(> .e_headline)) .media-block, .wp-block-bitv-video-text-modul.modul.video-text:not(:has(> .modul-button)) .media-block, .wp-block-bitv-video-text-modul.modul.video-text:not(:has(> .e_headline)) .media-block, .wp-block-bitv-app-img-modul.modul.app-modul:not(:has(> .app-buttons)) .media-block, .wp-block-bitv-app-img-modul.modul.app-modul:not(:has(> .e_headline)) .media-block, .wp-block-bitv-img-app-modul.modul.app-modul:not(:has(> .app-buttons)) .media-block, .wp-block-bitv-img-app-modul.modul.app-modul:not(:has(> .e_headline)) .media-block, .wp-block-bitv-image-ap.modul.image-text:not(:has(> .block-text:not(.ap-daten))) .media-block, .wp-block-bitv-image-ap.modul.image-text:not(:has(> .e_headline)) .media-block, .wp-block-bitv-ap-image.modul.text-image:not(:has(> .block-text:not(.ap-daten))) .media-block, .wp-block-bitv-ap-image.modul.text-image:not(:has(> .e_headline)) .media-block { grid-row: 1 / span 2; } .wp-block-bitv-image-text.modul.image-text:not(:has(> .e_headline)):not(:has(> .modul-button)) .media-block, .wp-block-bitv-text-image.modul.text-image:not(:has(> .e_headline)):not(:has(> .modul-button)) .media-block, .wp-block-bitv-text-video-modul.modul.text-video:not(:has(> .e_headline)):not(:has(> .modul-button)) .media-block, .wp-block-bitv-video-text-modul.modul.video-text:not(:has(> .e_headline)):not(:has(> .modul-button)) .media-block, .wp-block-bitv-app-img-modul.modul.app-modul:not(:has(> .e_headline)):not(:has(> .app-buttons)) .media-block, .wp-block-bitv-img-app-modul.modul.app-modul:not(:has(> .e_headline)):not(:has(> .app-buttons)) .media-block, .wp-block-bitv-image-ap.modul.image-text:not(:has(> .e_headline)):not(:has(> .block-text:not(.ap-daten))) .media-block, .wp-block-bitv-ap-image.modul.text-image:not(:has(> .e_headline)):not(:has(> .block-text:not(.ap-daten))) .media-block { grid-row: 1; } .media-block img, .media-block video { width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover; } .modul.media-text-modul .modul-button a { width: auto; display: inline-block; margin: 0; } }