/* ========================================= CONTENT MEDIA SECTION JSON DRIVEN ========================================= */ /* ========================================= SECTION ========================================= */ .content-media { width: 100%; background: var( --cm-background, transparent ); padding: var(--cm-desktop-padding-top, 0px) var(--cm-desktop-padding-right, 0px) var(--cm-desktop-padding-bottom, 0px) var(--cm-desktop-padding-left, 0px); } /* ========================================= CARD MODE ========================================= */ .content-media[style*="--cm-card-enabled: 1"] { width: auto; margin: var(--cm-card-margin-top, 0px) var(--cm-card-margin-right, 0px) var(--cm-card-margin-bottom, 0px) var(--cm-card-margin-left, 0px); border-radius: var(--cm-card-border-radius, 0px); overflow: var(--cm-card-overflow, visible); box-shadow: var(--cm-card-box-shadow, none); } /* ========================================= CARD MODE ========================================= */ .content-media.content-media-card { width: auto; margin: var(--cm-card-margin-top, 0px) var(--cm-card-margin-right, 0px) var(--cm-card-margin-bottom, 0px) var(--cm-card-margin-left, 0px); border-radius: var(--cm-card-border-radius, 0px); overflow: var(--cm-card-overflow, visible); box-shadow: var(--cm-card-box-shadow, none); } /* ========================================= ITEM ========================================= */ .content-media-item { width: 100%; max-width: var( --cm-max-width, 1280px ); margin: 0 auto; } /* ========================================= DEVICE ========================================= */ .content-media-device { width: 100%; } /* ========================================= DESKTOP LAYOUT ========================================= */ .content-media-device-desktop { display: flex; align-items: var( --cm-device-alignment, center ); gap: var( --cm-device-gap, var(--cm-desktop-gap, 0px) ); } /* ========================================= DESKTOP DIRECTION ========================================= */ .content-media-device-desktop[data-direction="content-media"] { flex-direction: row; } .content-media-device-desktop[data-direction="media-content"] { flex-direction: row-reverse; } /* ========================================= CONTENT BLOCK ========================================= */ .content-media-content { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; width: var( --cm-desktop-content-width, 50% ); max-width: var( --cm-desktop-content-max-width, 100% ); padding: var(--cm-desktop-content-padding-top, 0px) var(--cm-desktop-content-padding-right, 0px) var(--cm-desktop-content-padding-bottom, 0px) var(--cm-desktop-content-padding-left, 0px); text-align: var( --cm-desktop-content-align, left ); } /* ========================================= CONTENT ALIGNMENT ========================================= */ .content-media-content { align-items: var( --cm-desktop-content-flex-align, flex-start ); } /* CSS cannot automatically convert text-align values into flex alignment. These selectors handle the JSON values. */ .content-media-content[style*="--cm-desktop-content-align: center"] { align-items: center; } .content-media-content[style*="--cm-desktop-content-align: right"] { align-items: flex-end; } /* ========================================= MEDIA BLOCK ========================================= */ /* ========================================= MEDIA BLOCK ========================================= */ .content-media-media { box-sizing: border-box; width: var( --cm-desktop-media-width, 50% ); min-width: 0; display: flex; justify-content: var( --cm-desktop-main-media-align, flex-start ); } /* ========================================= MAIN MEDIA ========================================= */ .content-media-main { position: relative; width: var( --cm-desktop-main-media-width, 100% ); margin-left: var( --cm-main-media-margin-left, auto ); margin-right: var( --cm-main-media-margin-right, auto ); aspect-ratio: var( --cm-main-aspect-ratio, 16 / 9 ); border-radius: var( --cm-media-border-radius, 0px ); overflow: hidden; } .content-media-main img, .content-media-main video { display: block; width: 100%; height: 100%; object-fit: var( --cm-media-object-fit, cover ); object-position: var( --cm-media-object-position, center center ); } /* ========================================= THUMBNAILS WRAPPER ========================================= */ .content-media-thumbnails { box-sizing: border-box; min-width: 0; gap: var( --cm-thumbnail-gap, 10px ); } /* ========================================= HORIZONTAL THUMBNAILS ========================================= */ .content-media-thumbnails-horizontal { display: flex; flex-direction: column; gap: var( --cm-thumbnail-gap, 10px ); } /* The thumbnails themselves */ .content-media-thumbnails-horizontal .content-media-thumbnails { display: grid; grid-template-columns: repeat( var(--cm-visible-items, 3), minmax(0, 1fr) ); } /* ========================================= HORIZONTAL THUMBNAIL SCROLL ========================================= */ .content-media-thumbnails-horizontal .content-media-thumbnails[data-scroll="true"] { display: flex; flex-wrap: nowrap; width: 100%; min-width: 0; overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* ========================================= HORIZONTAL SCROLL ITEMS ========================================= */ .content-media-thumbnails-horizontal .content-media-thumbnails[data-scroll="true"] .content-media-thumbnail { flex: 0 0 calc( ( 100% - ( ( var(--cm-visible-items, 3) - 1 ) * var(--cm-thumbnail-gap, 10px) ) ) / var(--cm-visible-items, 3) ); flex-shrink: 0; } /* ========================================= VERTICAL SCROLL ITEMS ========================================= */ .content-media-thumbnails-left .content-media-thumbnails[data-scroll="true"] .content-media-thumbnail, .content-media-thumbnails-right .content-media-thumbnails[data-scroll="true"] .content-media-thumbnail { flex: 0 0 calc( ( 100% - ( ( var(--cm-visible-items, 3) - 1 ) * var(--cm-thumbnail-gap, 10px) ) ) / var(--cm-visible-items, 3) ); flex-shrink: 0; } /* ========================================= VERTICAL THUMBNAILS ========================================= */ .content-media-thumbnails-vertical { display: flex; flex-direction: row; align-items: stretch; gap: var( --cm-thumbnail-gap, 10px ); } /* ========================================= LEFT / RIGHT MEDIA LAYOUT ========================================= */ .content-media-thumbnails-left, .content-media-thumbnails-right { display: flex; flex-direction: row; align-items: stretch; gap: var( --cm-thumbnail-gap, 10px ); } /* ========================================= LEFT THUMBNAILS ========================================= */ .content-media-thumbnails-left .content-media-thumbnails { order: 1; display: grid; grid-template-rows: repeat( var(--cm-visible-items, 3), minmax(0, 1fr) ); flex: 0 0 calc( 100% / var(--cm-visible-items, 3) ); } /* Main media */ .content-media-thumbnails-left .content-media-main { order: 2; flex: 1; } /* ========================================= RIGHT THUMBNAILS ========================================= */ .content-media-thumbnails-right .content-media-main { order: 1; flex: 1; } .content-media-thumbnails-right .content-media-thumbnails { order: 2; display: grid; grid-template-rows: repeat( var(--cm-visible-items, 3), minmax(0, 1fr) ); flex: 0 0 calc( 100% / var(--cm-visible-items, 3) ); } /* ========================================= VERTICAL THUMBNAIL SCROLL ========================================= */ .content-media-thumbnails-left .content-media-thumbnails[data-scroll="true"], .content-media-thumbnails-right .content-media-thumbnails[data-scroll="true"] { display: flex; flex-direction: column; flex-wrap: nowrap; min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; scroll-behavior: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* ========================================= THUMBNAIL ITEM ========================================= */ .content-media-thumbnail { position: relative; min-width: 0; aspect-ratio: var( --cm-thumbnail-aspect-ratio, 1 / 1 ); border-radius: var( --cm-media-border-radius, 0px ); overflow: hidden; cursor: pointer; } .content-media-thumbnail img, .content-media-thumbnail video { display: block; width: 100%; height: 100%; object-fit: var( --cm-media-object-fit, cover ); object-position: var( --cm-media-object-position, center center ); } /* ========================================= TOP / BOTTOM THUMBNAILS ========================================= */ .content-media-thumbnails-top, .content-media-thumbnails-bottom { display: flex; flex-direction: column; gap: var( --cm-thumbnail-gap, 10px ); } /* ========================================= TOP THUMBNAILS ========================================= */ .content-media-thumbnails-top .content-media-thumbnails { order: 1; } .content-media-thumbnails-top .content-media-main { order: 2; } /* ========================================= BOTTOM THUMBNAILS ========================================= */ .content-media-thumbnails-bottom .content-media-main { order: 1; } .content-media-thumbnails-bottom .content-media-thumbnails { order: 2; } /* ========================================= TEXT ELEMENTS ========================================= */ .content-media-eyebrow, .content-media-heading, .content-media-description, .content-media-additional-title, .content-media-additional-description { box-sizing: border-box; max-width: var( --cm-text-max-width, 100% ); color: var( --cm-text-color, inherit ); font-size: var( --cm-font-size, inherit ); font-weight: var( --cm-font-weight, inherit ); line-height: var( --cm-line-height, inherit ); letter-spacing: var( --cm-letter-spacing, normal ); text-transform: var( --cm-text-transform, none ); margin: var(--cm-margin-top, 0px) var(--cm-margin-right, 0px) var(--cm-margin-bottom, 0px) var(--cm-margin-left, 0px); } /* ========================================= EYEBROW ========================================= */ .content-media-eyebrow { width: 100%; } /* ========================================= HEADING ========================================= */ .content-media-heading { width: 100%; } /* ========================================= DESCRIPTION ========================================= */ .content-media-description { width: 100%; } /* ========================================= DESCRIPTION PARAGRAPHS ========================================= */ .content-media-description-paragraph { width: 100%; margin: 0; } /* ========================================= DESCRIPTION PARAGRAPH SPACING ========================================= */ .content-media-description-paragraph + .content-media-description-paragraph { margin-top: var( --cm-description-paragraph-gap, 16px ); } /* ========================================= ADDITIONAL CONTENT ========================================= */ .content-media-additional { width: 100%; display: flex; flex-direction: column; gap: var( --cm-additional-gap, 16px ); margin: var(--cm-additional-margin-top, 0px) var(--cm-additional-margin-right, 0px) var(--cm-additional-margin-bottom, 0px) var(--cm-additional-margin-left, 0px); } /* ========================================= ADDITIONAL ITEM ========================================= */ .content-media-additional-item { width: 100%; box-sizing: border-box; } /* ========================================= ADDITIONAL BODY ========================================= */ .content-media-additional-body { min-width: 0; } /* ========================================= ADDITIONAL MARKER ========================================= */ .content-media-additional-marker { flex-shrink: 0; width: var( --cm-additional-marker-size, 20px ); height: var( --cm-additional-marker-size, 20px ); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; color: var( --cm-additional-marker-color, currentColor ); background: var( --cm-additional-marker-background, transparent ); border-radius: var( --cm-additional-marker-radius, 0px ); line-height: 1; font-weight: 700; } /* ========================================= CHECK / BULLET / NUMBER LAYOUT ========================================= */ .content-media-additional[data-layout="check"] .content-media-additional-item, .content-media-additional[data-layout="bullet"] .content-media-additional-item, .content-media-additional[data-layout="number"] .content-media-additional-item { display: flex; align-items: flex-start; gap: 12px; } /* ========================================= MARKER DISABLED ========================================= */ .content-media-additional[data-marker-enabled="false"] .content-media-additional-marker { display: none; } /* ========================================= ADDITIONAL TITLE ========================================= */ .content-media-additional-title { width: 100%; margin: 0; } /* ========================================= ADDITIONAL DESCRIPTION ========================================= */ .content-media-additional-description { width: 100%; margin: 0; } /* ========================================= CARD LAYOUT ========================================= */ .content-media-additional[data-layout="card"] { display: grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) ); } .content-media-additional[data-layout="card"] .content-media-additional-item { padding: 20px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; background: #ffffff; } .content-media-additional[data-layout="card"] .content-media-additional-marker { display: none; } /* ========================================= CHECK LAYOUT ========================================= */ .content-media-additional[data-layout="check"] .content-media-additional-marker { border-radius: 50%; } /* ========================================= BULLET LAYOUT ========================================= */ .content-media-additional[data-layout="bullet"] .content-media-additional-marker { background: transparent; } /* ========================================= NUMBER LAYOUT ========================================= */ .content-media-additional[data-layout="number"] .content-media-additional-marker { border-radius: 50%; } /* ========================================= BUTTON ========================================= */ .content-media-button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; cursor: pointer; background: var( --cm-button-background, transparent ); color: var( --cm-button-color, inherit ); border: var( --cm-button-border, none ); border-radius: var( --cm-button-border-radius, 0px ); padding: var(--cm-button-padding-top, 0px) var(--cm-button-padding-right, 0px) var(--cm-button-padding-bottom, 0px) var(--cm-button-padding-left, 0px); font-size: var( --cm-button-font-size, inherit ); font-weight: var( --cm-button-font-weight, inherit ); line-height: var( --cm-button-line-height, normal ); letter-spacing: var( --cm-button-letter-spacing, normal ); text-transform: var( --cm-button-text-transform, none ); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .content-media-button:hover { background: var( --cm-button-hover-background, var(--cm-button-background, transparent) ); color: var( --cm-button-hover-color, var(--cm-button-color, inherit) ); border: var( --cm-button-hover-border, var(--cm-button-border, none) ); } /* ========================================= HIDE MOBILE ON DESKTOP ========================================= */ .content-media-device-mobile { display: none; } /* ========================================= RESPONSIVE MOBILE ========================================= */ @media (max-width: 767px) { /* ===================================== SECTION ===================================== */ .content-media { box-sizing: border-box; width: calc( 100% - var(--cm-card-mobile-margin-left, 0px) - var(--cm-card-mobile-margin-right, 0px) ); margin: var(--cm-card-mobile-margin-top, 0px) var(--cm-card-mobile-margin-right, 0px) var(--cm-card-mobile-margin-bottom, 0px) var(--cm-card-mobile-margin-left, 0px); border-radius: var( --cm-card-border-radius, 0px ); overflow: var( --cm-card-overflow, hidden ); box-shadow: var( --cm-card-box-shadow, none ); padding: var(--cm-mobile-padding-top, 0px) var(--cm-mobile-padding-right, 0px) var(--cm-mobile-padding-bottom, 0px) var(--cm-mobile-padding-left, 0px); } /* ===================================== MOBILE CARD ===================================== */ .content-media.content-media-card { width: auto; margin: var(--cm-mobile-card-margin-top, 0px) var(--cm-mobile-card-margin-right, 0px) var(--cm-mobile-card-margin-bottom, 0px) var(--cm-mobile-card-margin-left, 0px); } /* ===================================== HIDE DESKTOP ===================================== */ .content-media-device-desktop { display: none; } /* ===================================== SHOW MOBILE ===================================== */ .content-media-device-mobile { display: flex; width: 100%; align-items: var( --cm-device-alignment, center ); gap: var( --cm-device-gap, var(--cm-mobile-gap, 0px) ); } /* ===================================== MOBILE DIRECTION ===================================== */ .content-media-device-mobile[data-direction="content-media"] { flex-direction: column; } .content-media-device-mobile[data-direction="media-content"] { flex-direction: column-reverse; } /* ===================================== MOBILE CONTENT ===================================== */ .content-media-device-mobile .content-media-content { width: 100%; max-width: var( --cm-mobile-content-max-width, 100% ); padding: var(--cm-mobile-content-padding-top, 0px) var(--cm-mobile-content-padding-right, 0px) var(--cm-mobile-content-padding-bottom, 0px) var(--cm-mobile-content-padding-left, 0px); text-align: var( --cm-mobile-content-align, left ); } /* ===================================== MOBILE CONTENT ALIGNMENT ===================================== */ .content-media-device-mobile .content-media-content { align-items: flex-start; } .content-media-device-mobile .content-media-content[style*="--cm-mobile-content-align: center"] { align-items: center; } .content-media-device-mobile .content-media-content[style*="--cm-mobile-content-align: right"] { align-items: flex-end; } /* ===================================== MOBILE MEDIA ===================================== */ .content-media-device-mobile .content-media-media { width: 100%; } /* ===================================== MOBILE MAIN MEDIA WIDTH + ALIGNMENT ===================================== */ .content-media-device-mobile .content-media-main { width: var( --cm-mobile-main-media-width, 100% ); align-self: var( --cm-mobile-main-media-align, center ); } /* ===================================== MOBILE LEFT / RIGHT THUMBNAILS ===================================== */ .content-media-device-mobile .content-media-thumbnails-left, .content-media-device-mobile .content-media-thumbnails-right { display: flex; flex-direction: row; align-items: stretch; } .content-media-device-mobile.content-media-thumbnails-left.content-media-thumbnails-scroll .content-media-thumbnails, .content-media-device-mobile.content-media-thumbnails-right.content-media-thumbnails-scroll .content-media-thumbnails { overflow-y: auto; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 480px) { .content-media-thumbnails-horizontal .content-media-thumbnails[data-scroll="false"] { grid-template-columns: repeat( var(--cm-visible-items, 3), minmax(0, 1fr) ); } } /* ========================================= PERFORMANCE ========================================= */ .content-media img { max-width: 100%; } .content-media video { max-width: 100%; }