.RV-ContentCrop { display: block; overflow: hidden; height: calc(100% - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-ContentCrop .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-ContentCrop .RV-Text { overflow: hidden; display: block; position: relative; text-overflow: ellipsis; background-color: #fff; line-height: 1.1; max-height: 334.40000000000003px; padding: 0; margin: 0; } .RV-ContentCrop--bottom .RV-Image * { object-position: bottom; } .RV-ContentCrop--top .RV-Image * { object-position: top; } .RV-ContentCrop--right .RV-Image * { object-position: right; } .RV-ContentCrop--left .RV-Image * { object-position: left; } .RV-ContentCrop--center .RV-Image * { object-position: center; } .RV-ContentCrop--square { width: 100%; padding-top: 100%; position: relative; } .RV-ContentCrop--square .RV-Image *, .RV-ContentCrop--square div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop--circle { border-radius: 50%; width: 100%; padding-top: 100%; position: relative; } .RV-ContentCrop--circle .RV-Image *, .RV-ContentCrop--circle div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-ContentCrop__--ellipsis:after { position: relative; display: block; bottom: 1.2em; left: calc(100% - 3ch); content: '...'; font-size: 1.2em; min-width: 2em; background-color: #fff; padding: 0 2px; } .RV-ContentCrop__--fade:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: ' '; opacity: 0.8; position: relative; top: -25%; width: 100%; height: 25%; z-index: 10; } .RV-FullWidthContent { width: 100%; } .RV-FullWidthContent__Item { width: 100%; } .RV-FlexRow { display: flex; height: 100%; --width: 100px; --localBreakPoint: 500px; --mediaBreakPoint: 100vw; } .RV-FlexRow--auto { flex-direction: row; } .RV-FlexRow--vertical { flex-direction: column; } .RV-FlexRow--breakPoint { flex-wrap: wrap; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; --inner-spacing: 0px; --outer-spacing: 0px; gap: 0px; } .RV-FlexRow--breakPoint *:first-child:nth-last-child(1), .RV-FlexRow--breakPoint *:first-child:nth-last-child(1)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (1 - 1))) / 1 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(2), .RV-FlexRow--breakPoint *:first-child:nth-last-child(2)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (2 - 1))) / 2 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(3), .RV-FlexRow--breakPoint *:first-child:nth-last-child(3)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (3 - 1))) / 3 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(4), .RV-FlexRow--breakPoint *:first-child:nth-last-child(4)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (4 - 1))) / 4 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(5), .RV-FlexRow--breakPoint *:first-child:nth-last-child(5)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (5 - 1))) / 5 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(6), .RV-FlexRow--breakPoint *:first-child:nth-last-child(6)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (6 - 1))) / 6 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(7), .RV-FlexRow--breakPoint *:first-child:nth-last-child(7)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (7 - 1))) / 7 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(8), .RV-FlexRow--breakPoint *:first-child:nth-last-child(8)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (8 - 1))) / 8 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(9), .RV-FlexRow--breakPoint *:first-child:nth-last-child(9)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (9 - 1))) / 9 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(10), .RV-FlexRow--breakPoint *:first-child:nth-last-child(10)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (10 - 1))) / 10 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(11), .RV-FlexRow--breakPoint *:first-child:nth-last-child(11)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (11 - 1))) / 11 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(12), .RV-FlexRow--breakPoint *:first-child:nth-last-child(12)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (12 - 1))) / 12 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(13), .RV-FlexRow--breakPoint *:first-child:nth-last-child(13)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (13 - 1))) / 13 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(14), .RV-FlexRow--breakPoint *:first-child:nth-last-child(14)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (14 - 1))) / 14 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(15), .RV-FlexRow--breakPoint *:first-child:nth-last-child(15)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (15 - 1))) / 15 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(16), .RV-FlexRow--breakPoint *:first-child:nth-last-child(16)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (16 - 1))) / 16 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(17), .RV-FlexRow--breakPoint *:first-child:nth-last-child(17)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (17 - 1))) / 17 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(18), .RV-FlexRow--breakPoint *:first-child:nth-last-child(18)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (18 - 1))) / 18 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(19), .RV-FlexRow--breakPoint *:first-child:nth-last-child(19)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (19 - 1))) / 19 - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint *:first-child:nth-last-child(20), .RV-FlexRow--breakPoint *:first-child:nth-last-child(20)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (20 - 1))) / 20 - (2 * var(--spacing-inner))); } @media (max-width: var(--mediaBreakPoint)) { .RV-FlexRow--breakPoint { flex-direction: row; } } .RV-FlexRow--breakPoint .RV-FlexRow__Item { min-width: initial; flex-basis: calc(var(--localBreakPoint) * 999 - 100% * 999); overflow: hidden; } .RV-FlexRow--auto { flex-direction: row; flex-wrap: wrap; } .RV-FlexRow__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; } .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-FlexRow__Item--narrow { flex-grow: 2; flex-shrink: 4; } .RV-FlexRow__Item--wide { flex-grow: 4; flex-shrink: 2; } .RV-FlexRow__Item--wider { flex-grow: 5; flex-shrink: 1; } .RV-FlexRow__Item--narrower { flex-grow: 1; flex-shrink: 5; } .RV-FlexRow__Item--half { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; } .RV-FlexRow__Item--third { flex-grow: 0; flex-shrink: 0; flex-basis: 33.333333333333336%; } .RV-FlexRow__Item--quarter { flex-grow: 0; flex-shrink: 0; flex-basis: 25%; } .RV-FlexRow__Item--content { flex-grow: 0; flex-shrink: 0; flex-basis: max-content; } .RV-FlexGrid { --item-height: 300px; --item-width: 300px; display: grid; grid-template-columns: repeat(auto-fill, var(--item-width)); } .RV-FlexGrid--autoWidth { grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr)); grid-template-rows: repeat(auto-fill, minmax(var(--item-height), 1fr)); grid-auto-rows: minmax(var(--item-height), 1fr); } .RV-FlexGrid--fixedSize { grid-template-rows: repeat(auto-fill, minmax(var(--item-height), 1fr)); grid-auto-rows: minmax(var(--item-height), 1fr); grid-template-columns: repeat(auto-fill, var(--item-width)); justify-content: space-between; } .RV-FlexGrid--masonry { display: block; column-count: auto; column-width: var(--item-width); } .RV-FlexGrid--masonry .RV-FlexGrid__Item { display: inline-block; height: unset; margin-bottom: var(--inner-spacing); } .RV-FlexGrid--masonry .RV-FlexGrid__Item > * { height: auto; } .RV-FlexGrid__Item { height: calc(var(--item-height) - calc(2*var(--inner-spacing))); } .RV-FlexGrid__Item > * { height: 100%; width: 100%; } .RV-Fan { --base-height: 280px; --base-width: 320px; --inner-spacing: 0px; display: flex; position: relative; } .RV-Fan--fullWidth { flex-flow: row wrap; } .RV-Fan--fullWidth .RV-Fan__Surface { min-width: calc(calc(var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); width: calc(calc(100% - var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan--fullWidth .RV-Fan__Base { flex-grow: 1; } .RV-Fan--fullWidth .RV-Fan__Surface { flex-grow: 1; } .RV-Fan--vertical { flex-direction: column; width: max-content; } .RV-Fan--vertical .RV-Fan__Surface { width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); min-height: var(--base-height); } .RV-Fan--horizontal { flex-direction: row; } .RV-Fan--horizontal .RV-Fan__Surface { min-width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan--auto { flex-flow: row wrap; } .RV-Fan--auto .RV-Fan__Surface { min-width: calc(calc(var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); width: calc(calc(100% - var(--base-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan__Surface { display: block; overflow: hidden; height: calc(100% - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); overflow: hidden; height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-Fan__Surface .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-Fan__Surface .RV-Text { overflow: hidden; display: block; position: relative; text-overflow: ellipsis; background-color: #fff; line-height: 1.1; max-height: 334.40000000000003px; padding: 0; margin: 0; } .RV-Fan__Surface--fixedWidth { max-width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-Fan__Surface--fixedHeight { height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); } .RV-Fan__Base { height: calc(var(--base-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); flex: 0 0 auto; } .RV-Alignment { display: grid; } .RV-Alignment--top { align-content: start; } .RV-Alignment--bottom { align-content: end; } .RV-Alignment--left { justify-content: start; } .RV-Alignment--right { justify-content: end; } .RV-Alignment--horizontalCenter { justify-content: center; } .RV-Alignment--verticalCenter { align-items: center; } .RV-Alignment--center { align-items: center; justify-content: center; } .RV-Dummy--square { height: 350px; width: 350px; } .RV-Dummy--portrait { height: 350px; width: 150px; } .RV-Dummy--landscape { width: 350px; height: 150px; } .RV-Dummy--red { background-color: #d8583e; } .RV-Spacing__Outer--small { margin: 10px; --outer-spacing: 10px; } .RV-Spacing__Outer--medium { margin: 25px; --outer-spacing: 25px; } .RV-Spacing__Outer--large { margin: 35px; --outer-spacing: 35px; } .RV-Spacing__Inner--small { padding: 10px; gap: 10px; column-gap: 10px; --inner-spacing: 10px; } .RV-Spacing__Inner--medium { padding: 25px; gap: 25px; column-gap: 25px; --inner-spacing: 25px; } .RV-Spacing__Inner--large { padding: 35px; gap: 35px; column-gap: 35px; --inner-spacing: 35px; } .RV-BoxShadow { --color: #6b5690; position: relative; background-color: #fff; } .RV-BoxShadow:before, .RV-BoxShadow:after { content: ''; position: absolute; z-index: -2; } .RV-BoxShadow--simple { box-shadow: 0 0 10px 3px var(--color); } .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after { bottom: 15px; left: 10px; width: 50%; height: 20%; box-shadow: 0 15px 8px var(--color); transform: rotate(-5deg); } .RV-BoxShadow--liftedCorners:after { right: 10px; left: auto; transform: rotate(5deg); } .RV-BoxShadow--levitating { box-shadow: var(--color) 0px 1px 1px 0px inset, var(--color) 0px 40px 80px -15px, var(--color) 0px 30px 60px -30px; } .RV-BoxShadow--stacked { --color: 107, 86, 144; box-shadow: rgba(var(--color), 0.4) 0px 5px, rgba(var(--color), 0.3) 0px 10px, rgba(var(--color), 0.2) 0px 15px, rgba(var(--color), 0.1) 0px 20px, rgba(var(--color), 0.05) 0px 25px; } .RV-BoxShadow--drop { position: relative; box-shadow: 0 1px 4px var(--color); } .RV-BoxShadow--drop:after { box-shadow: 0 0 40px var(--color); bottom: 0px; left: 10%; right: 10%; width: 80%; height: 50%; border-radius: 100%; } .RV-BoxShadow--solid { border: 8px solid var(--color); border-radius: 14px; padding: 8px; margin: -8px; } .RV-Iconized--extraSmall .RV-Iconized__Icon { width: 1em; height: 1em; position: relative; top: 0.125em; } .RV-Iconized--small { top: -0.25em; } .RV-Iconized--small .RV-Iconized__Icon { width: 1.5em; height: 1.5em; position: relative; top: 0.45em; } .RV-Iconized--medium { top: -0.5em; } .RV-Iconized--medium .RV-Iconized__Icon { width: 2em; height: 2em; position: relative; top: 0.625em; } .RV-Iconized--large { top: -1.03073em; } .RV-Iconized--large .RV-Iconized__Icon { width: 3em; height: 3em; position: relative; top: 1.15573em; } .RV-Iconized--huge { top: -2.05em; } .RV-Iconized--huge .RV-Iconized__Icon { width: 5em; height: 5em; position: relative; top: 2.175em; } .RV-Iconized__Icon { margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; --inner-spacing: 0px; --outer-spacing: 0px; } * { margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; --inner-spacing: 0px; --outer-spacing: 0px; }