/* ========================================================= MEDIA CARD DESCRIPTION JSON CONFIGURATION REFERENCE ========================================================= DESCRIPTION TYPES --------------------------------------------------------- 1. PARAGRAPH Use for normal paragraph text. JSON: "description": { "type": "paragraph", "text": "Your paragraph text here." } 2. BULLETS Use for an unordered list. JSON: "description": { "type": "list", "style": "disc", "items": [ "Item 1", "Item 2", "Item 3" ] } 3. NUMBERS Use for an ordered numbered list. JSON: "description": { "type": "list", "style": "decimal", "items": [ "Item 1", "Item 2", "Item 3" ] } 4. NONE Use when no description should be displayed. JSON: "description": { "type": "none" } 5. MIXED Use when paragraph(s) and list(s) are required together. JSON: "description": { "type": "mixed", "blocks": [ { "type": "paragraph", "text": "Introduction paragraph." }, { "type": "list", "style": "disc", "items": [ "Item 1", "Item 2", "Item 3" ] }, { "type": "paragraph", "text": "Closing paragraph." } ] } ========================================================= LIST STYLES ========================================================= UNORDERED / BULLET LIST --------------------------------------------------------- style: "disc" Result: ● Item 1 ● Item 2 ● Item 3 style: "circle" Result: ○ Item 1 ○ Item 2 ○ Item 3 style: "square" Result: ■ Item 1 ■ Item 2 ■ Item 3 ORDERED / NUMBER LIST --------------------------------------------------------- style: "decimal" Result: 1. Item 1 2. Item 2 3. Item 3 style: "lower-alpha" Result: a. Item 1 b. Item 2 c. Item 3 style: "upper-alpha" Result: A. Item 1 B. Item 2 C. Item 3 style: "lower-roman" Result: i. Item 1 ii. Item 2 iii. Item 3 style: "upper-roman" Result: I. Item 1 II. Item 2 III. Item 3 ========================================================= AVAILABLE JSON COMMANDS ========================================================= type: "paragraph" "list" "none" "mixed" list style: "disc" "circle" "square" "decimal" "lower-alpha" "upper-alpha" "lower-roman" "upper-roman" ========================================================= */ /* ========================================= MEDIA CARDS SECTION ========================================= */ .media-cards-section { width: 100%; background: var(--mc-background); max-width: 100%; margin-top: var(--mc-section-desktop-margin-top); margin-right: var(--mc-section-desktop-margin-right); margin-bottom: var(--mc-section-desktop-margin-bottom); margin-left: var(--mc-section-desktop-margin-left); padding-top: var(--mc-desktop-padding-top); padding-right: var(--mc-desktop-padding-right); padding-bottom: var(--mc-desktop-padding-bottom); padding-left: var(--mc-desktop-padding-left); box-sizing: border-box; } /* ========================================= CONTAINER ========================================= */ .media-cards-container { width: 100%; max-width: var(--mc-max-width); margin-left: auto; margin-right: auto; box-sizing: border-box; } /* ========================================= HEADER ========================================= */ .media-cards-header { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; box-sizing: border-box; } /* ========================================= HEADER ICON ========================================= */ .media-cards-header-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--mc-header-icon-desktop-size); min-width: var(--mc-header-icon-desktop-size); height: var(--mc-header-icon-desktop-size); color: var(--mc-header-icon-desktop-color); background: var(--mc-header-icon-desktop-background); border: var(--mc-header-icon-desktop-border); border-radius: var(--mc-header-icon-desktop-radius); margin-top: var(--mc-header-icon-desktop-margin-top); margin-right: var(--mc-header-icon-desktop-margin-right); margin-bottom: var(--mc-header-icon-desktop-margin-bottom); margin-left: var(--mc-header-icon-desktop-margin-left); box-sizing: border-box; } /* ========================================= HEADER HEADING ========================================= */ .media-cards-heading { width: 100%; max-width: var(--mc-heading-desktop-max-width); color: var(--mc-heading-desktop-color); margin-top: var(--mc-heading-desktop-margin-top); margin-right: var(--mc-heading-desktop-margin-right); margin-bottom: var(--mc-heading-desktop-margin-bottom); margin-left: var(--mc-heading-desktop-margin-left); font-family: var(--mc-heading-desktop-font-family); font-size: var(--mc-heading-desktop-size); font-weight: var(--mc-heading-desktop-weight); line-height: var(--mc-heading-desktop-line-height); letter-spacing: var(--mc-heading-desktop-letter-spacing); text-transform: var(--mc-heading-desktop-transform); box-sizing: border-box; } /* ========================================= HEADER DESCRIPTION ========================================= */ .media-cards-header-description { width: 100%; max-width: var(--mc-header-description-desktop-max-width); color: var(--mc-header-description-desktop-color); margin-top: var(--mc-header-description-desktop-margin-top); margin-right: var(--mc-header-description-desktop-margin-right); margin-bottom: var(--mc-header-description-desktop-margin-bottom); margin-left: var(--mc-header-description-desktop-margin-left); font-family: var(--mc-header-description-desktop-font-family); font-size: var(--mc-header-description-desktop-size); font-weight: var(--mc-header-description-desktop-weight); line-height: var(--mc-header-description-desktop-line-height); letter-spacing: var(--mc-header-description-desktop-letter-spacing); text-transform: var(--mc-header-description-desktop-transform); box-sizing: border-box; } /* ========================================= CARDS LIST ========================================= */ .media-cards-list { display: grid; grid-template-columns: repeat( var(--mc-desktop-columns), minmax(0, 1fr) ); column-gap: var(--mc-desktop-column-gap); row-gap: var(--mc-desktop-row-gap); margin-top: var(--mc-desktop-margin-top); margin-right: var(--mc-desktop-margin-right); margin-bottom: var(--mc-desktop-margin-bottom); margin-left: var(--mc-desktop-margin-left); width: 100%; box-sizing: border-box; } /* ========================================= CARD ========================================= */ .media-card { display: flex; flex-direction: column; width: 100%; min-width: 0; background: var(--mc-card-background); border: var(--mc-card-border); border-radius: var(--mc-card-radius); box-shadow: var(--mc-card-shadow); transition: var(--mc-card-transition); padding-top: var(--mc-card-desktop-padding-top); padding-right: var(--mc-card-desktop-padding-right); padding-bottom: var(--mc-card-desktop-padding-bottom); padding-left: var(--mc-card-desktop-padding-left); box-sizing: border-box; overflow: hidden; } /* ========================================= CARD HOVER ========================================= */ .media-card:hover { transform: translateY(-2px); } /* ========================================= MEDIA WRAPPER ========================================= */ .media-card-media { width: var( --mc-media-desktop-width, 100% ); aspect-ratio: var( --mc-media-desktop-aspect-ratio, 16 / 9 ); overflow: hidden; border-radius: var(--mc-media-desktop-radius); position: relative; flex-shrink: 0; } /* ========================================= IMAGE ========================================= */ .media-card-image { display: block; width: 100%; height: 100%; object-fit: var(--mc-media-desktop-object-fit); object-position: var(--mc-media-desktop-position); } /* ========================================= VIDEO ========================================= */ .media-card-video { display: block; width: 100%; height: 100%; object-fit: var(--mc-media-desktop-object-fit); object-position: var(--mc-media-desktop-position); } /* ========================================= CARD CONTENT ========================================= */ .media-card-content { width: 100%; padding-top: var(--mc-content-desktop-padding-top); padding-right: var(--mc-content-desktop-padding-right); padding-bottom: var(--mc-content-desktop-padding-bottom); padding-left: var(--mc-content-desktop-padding-left); text-align: var(--mc-content-desktop-alignment); box-sizing: border-box; } /* ========================================= HIDE EMPTY CARD CONTENT ========================================= */ .media-card-content:empty { display: none; } /* ========================================= CARD ICON ========================================= */ .media-card-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--mc-card-icon-desktop-size); min-width: var(--mc-card-icon-desktop-size); height: var(--mc-card-icon-desktop-size); color: var(--mc-card-icon-desktop-color); background: var(--mc-card-icon-desktop-background); border: var(--mc-card-icon-desktop-border); border-radius: var(--mc-card-icon-desktop-radius); margin-top: var(--mc-card-icon-desktop-margin-top); margin-right: var(--mc-card-icon-desktop-margin-right); margin-bottom: var(--mc-card-icon-desktop-margin-bottom); margin-left: var(--mc-card-icon-desktop-margin-left); box-sizing: border-box; } /* ========================================= CARD TITLE ========================================= */ .media-card-title { width: 100%; max-width: var(--mc-card-title-desktop-max-width); color: var(--mc-card-title-desktop-color); margin-top: var(--mc-card-title-desktop-margin-top); margin-right: var(--mc-card-title-desktop-margin-right); margin-bottom: var(--mc-card-title-desktop-margin-bottom); margin-left: var(--mc-card-title-desktop-margin-left); font-family: var(--mc-card-title-desktop-font-family); font-size: var(--mc-card-title-desktop-size); font-weight: var(--mc-card-title-desktop-weight); line-height: var(--mc-card-title-desktop-line-height); letter-spacing: var(--mc-card-title-desktop-letter-spacing); text-transform: var(--mc-card-title-desktop-transform); } /* ========================================= CARD DESCRIPTION ========================================= */ .media-card-description { width: 100%; max-width: var(--mc-card-description-desktop-max-width); color: var(--mc-card-description-desktop-color); margin-top: var(--mc-card-description-desktop-margin-top); margin-right: var(--mc-card-description-desktop-margin-right); margin-bottom: var(--mc-card-description-desktop-margin-bottom); margin-left: var(--mc-card-description-desktop-margin-left); font-family: var(--mc-card-description-desktop-font-family); font-size: var(--mc-card-description-desktop-size); font-weight: var(--mc-card-description-desktop-weight); line-height: var(--mc-card-description-desktop-line-height); letter-spacing: var(--mc-card-description-desktop-letter-spacing); text-transform: var(--mc-card-description-desktop-transform); } /* ========================================= DESCRIPTION PARAGRAPHS ========================================= */ .media-card-description p { margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; } /* ========================================= DESCRIPTION LIST ========================================= */ .media-card-description-list { width: 100%; margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; padding-left: 24px; box-sizing: border-box; } /* ========================================= DESCRIPTION LIST ITEMS ========================================= */ .media-card-description-list li { margin-top: 0; margin-right: 0; margin-bottom: 5px; margin-left: 0; padding-left: 2px; } /* ========================================= LAST BLOCK ========================================= */ .media-card-description > *:last-child { margin-bottom: 0; } /* ========================================= BUTTON ========================================= */ /* ========================================= BUTTON WRAPPER ========================================= */ .media-card-button-wrapper { display: flex; justify-content: var(--mc-button-desktop-alignment); margin-top: var(--mc-button-desktop-margin-top); margin-right: var(--mc-button-desktop-margin-right); margin-bottom: var(--mc-button-desktop-margin-bottom); margin-left: var(--mc-button-desktop-margin-left); width: 100%; box-sizing: border-box; } /* ========================================= BUTTON ========================================= */ .media-card-button { display: inline-flex; align-items: center; justify-content: center; background: var(--mc-button-desktop-background); color: var(--mc-button-desktop-color); border: var(--mc-button-desktop-border); border-radius: var(--mc-button-desktop-radius); padding-top: var(--mc-button-desktop-padding-top); padding-right: var(--mc-button-desktop-padding-right); padding-bottom: var(--mc-button-desktop-padding-bottom); padding-left: var(--mc-button-desktop-padding-left); font-size: var(--mc-button-desktop-font-size); font-weight: var(--mc-button-desktop-font-weight); text-decoration: none; box-sizing: border-box; cursor: pointer; } /* ========================================= MOBILE ========================================= */ @media ( max-width: 767px ) { .media-cards-section { margin-top: var(--mc-section-mobile-margin-top); margin-right: var(--mc-section-mobile-margin-right); margin-bottom: var(--mc-section-mobile-margin-bottom); margin-left: var(--mc-section-mobile-margin-left); padding-top: var(--mc-mobile-padding-top); padding-right: var(--mc-mobile-padding-right); padding-bottom: var(--mc-mobile-padding-bottom); padding-left: var(--mc-mobile-padding-left); } /* ------------------------------------- HEADER ICON ------------------------------------- */ .media-cards-header-icon { width: var(--mc-header-icon-mobile-size); min-width: var(--mc-header-icon-mobile-size); height: var(--mc-header-icon-mobile-size); color: var(--mc-header-icon-mobile-color); background: var(--mc-header-icon-mobile-background); border: var(--mc-header-icon-mobile-border); border-radius: var(--mc-header-icon-mobile-radius); margin-top: var(--mc-header-icon-mobile-margin-top); margin-right: var(--mc-header-icon-mobile-margin-right); margin-bottom: var(--mc-header-icon-mobile-margin-bottom); margin-left: var(--mc-header-icon-mobile-margin-left); } /* ------------------------------------- HEADING ------------------------------------- */ .media-cards-heading { max-width: var(--mc-heading-mobile-max-width); color: var(--mc-heading-mobile-color); margin-top: var(--mc-heading-mobile-margin-top); margin-right: var(--mc-heading-mobile-margin-right); margin-bottom: var(--mc-heading-mobile-margin-bottom); margin-left: var(--mc-heading-mobile-margin-left); font-family: var(--mc-heading-mobile-font-family); font-size: var(--mc-heading-mobile-size); font-weight: var(--mc-heading-mobile-weight); line-height: var(--mc-heading-mobile-line-height); letter-spacing: var(--mc-heading-mobile-letter-spacing); text-transform: var(--mc-heading-mobile-transform); } /* ------------------------------------- HEADER DESCRIPTION ------------------------------------- */ .media-cards-header-description { max-width: var(--mc-header-description-mobile-max-width); color: var(--mc-header-description-mobile-color); margin-top: var(--mc-header-description-mobile-margin-top); margin-right: var(--mc-header-description-mobile-margin-right); margin-bottom: var(--mc-header-description-mobile-margin-bottom); margin-left: var(--mc-header-description-mobile-margin-left); font-family: var(--mc-header-description-mobile-font-family); font-size: var(--mc-header-description-mobile-size); font-weight: var(--mc-header-description-mobile-weight); line-height: var(--mc-header-description-mobile-line-height); letter-spacing: var(--mc-header-description-mobile-letter-spacing); text-transform: var(--mc-header-description-mobile-transform); } /* ------------------------------------- CARDS ------------------------------------- */ .media-cards-list { grid-template-columns: repeat( var(--mc-mobile-columns), minmax(0, 1fr) ); column-gap: var(--mc-mobile-column-gap); row-gap: var(--mc-mobile-row-gap); margin-top: var(--mc-mobile-margin-top); margin-right: var(--mc-mobile-margin-right); margin-bottom: var(--mc-mobile-margin-bottom); margin-left: var(--mc-mobile-margin-left); } /* ------------------------------------- CARD ------------------------------------- */ .media-card { padding-top: var(--mc-card-mobile-padding-top); padding-right: var(--mc-card-mobile-padding-right); padding-bottom: var(--mc-card-mobile-padding-bottom); padding-left: var(--mc-card-mobile-padding-left); } /* ------------------------------------- MEDIA ------------------------------------- */ .media-card-media { width: var(--mc-media-mobile-width); aspect-ratio: var(--mc-media-mobile-aspect-ratio); border-radius: var(--mc-media-mobile-radius); } .media-card-image, .media-card-video { object-fit: var(--mc-media-mobile-object-fit); object-position: var(--mc-media-mobile-position); } /* ------------------------------------- CONTENT ------------------------------------- */ .media-card-content { padding-top: var(--mc-content-mobile-padding-top); padding-right: var(--mc-content-mobile-padding-right); padding-bottom: var(--mc-content-mobile-padding-bottom); padding-left: var(--mc-content-mobile-padding-left); text-align: var(--mc-content-mobile-alignment); } /* ------------------------------------- ICON ------------------------------------- */ .media-card-icon { width: var(--mc-card-icon-mobile-size); min-width: var(--mc-card-icon-mobile-size); height: var(--mc-card-icon-mobile-size); color: var(--mc-card-icon-mobile-color); background: var(--mc-card-icon-mobile-background); border: var(--mc-card-icon-mobile-border); border-radius: var(--mc-card-icon-mobile-radius); margin-top: var(--mc-card-icon-mobile-margin-top); margin-right: var(--mc-card-icon-mobile-margin-right); margin-bottom: var(--mc-card-icon-mobile-margin-bottom); margin-left: var(--mc-card-icon-mobile-margin-left); } /* ------------------------------------- TITLE ------------------------------------- */ .media-card-title { max-width: var(--mc-card-title-mobile-max-width); color: var(--mc-card-title-mobile-color); margin-top: var(--mc-card-title-mobile-margin-top); margin-right: var(--mc-card-title-mobile-margin-right); margin-bottom: var(--mc-card-title-mobile-margin-bottom); margin-left: var(--mc-card-title-mobile-margin-left); font-family: var(--mc-card-title-mobile-font-family); font-size: var(--mc-card-title-mobile-size); font-weight: var(--mc-card-title-mobile-weight); line-height: var(--mc-card-title-mobile-line-height); letter-spacing: var(--mc-card-title-mobile-letter-spacing); text-transform: var(--mc-card-title-mobile-transform); } /* ------------------------------------- DESCRIPTION ------------------------------------- */ .media-card-description { max-width: var(--mc-card-description-mobile-max-width); color: var(--mc-card-description-mobile-color); margin-top: var(--mc-card-description-mobile-margin-top); margin-right: var(--mc-card-description-mobile-margin-right); margin-bottom: var(--mc-card-description-mobile-margin-bottom); margin-left: var(--mc-card-description-mobile-margin-left); font-family: var(--mc-card-description-mobile-font-family); font-size: var(--mc-card-description-mobile-size); font-weight: var(--mc-card-description-mobile-weight); line-height: var(--mc-card-description-mobile-line-height); letter-spacing: var(--mc-card-description-mobile-letter-spacing); text-transform: var(--mc-card-description-mobile-transform); } /* ========================================= DESCRIPTION PARAGRAPHS ========================================= */ .media-card-description p { margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; } /* ========================================= DESCRIPTION LIST ========================================= */ .media-card-description-list { width: 100%; margin-top: 0; margin-right: 0; margin-bottom: 12px; margin-left: 0; padding-left: 24px; box-sizing: border-box; } /* ========================================= DESCRIPTION LIST ITEMS ========================================= */ .media-card-description-list li { margin-top: 0; margin-right: 0; margin-bottom: 5px; margin-left: 0; padding-left: 2px; } /* ========================================= LAST BLOCK ========================================= */ .media-card-description > *:last-child { margin-bottom: 0; } /* ------------------------------------- BUTTON ------------------------------------- */ /* ------------------------------------- BUTTON WRAPPER ------------------------------------- */ .media-card-button-wrapper { display: flex; justify-content: var(--mc-button-mobile-alignment); margin-top: var(--mc-button-mobile-margin-top); margin-right: var(--mc-button-mobile-margin-right); margin-bottom: var(--mc-button-mobile-margin-bottom); margin-left: var(--mc-button-mobile-margin-left); width: 100%; box-sizing: border-box; } /* ------------------------------------- BUTTON ------------------------------------- */ .media-card-button { background: var(--mc-button-mobile-background); color: var(--mc-button-mobile-color); border: var(--mc-button-mobile-border); border-radius: var(--mc-button-mobile-radius); padding-top: var(--mc-button-mobile-padding-top); padding-right: var(--mc-button-mobile-padding-right); padding-bottom: var(--mc-button-mobile-padding-bottom); padding-left: var(--mc-button-mobile-padding-left); font-size: var(--mc-button-mobile-font-size); font-weight: var(--mc-button-mobile-font-weight); } }