.RV-Dummy { background-color: #f4a460; } .RV-Dummy__Landscape { min-width: 200px; width: 100%; min-height: 130px; } .RV-Dummy__Portrait { min-width: 130px; width: 100%; min-height: 200px; } .RV-Dummy__Square { min-width: 300px; width: 100%; min-height: 300px; } .RV-Dummy__Square--large { height: 500px; width: 500px; } .RV-Dummy__Square--small { height: 100px; width: 100px; } .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-Dummy:nth-child(2n) { background-color: #6495ed; } .RV-Dummy:nth-child(3n) { background-color: #90ee90; } .RV-Dummy--oranage { background-color: #f4a460; } .RV-Dummy--blue { background-color: #6495ed; } .RV-Dummy--green { background-color: #90ee90; } .RV-Dummy--red { background-color: #ce6d6d; } .RV-Dummy--yellow { background-color: #eae144; } .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__--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: '###'; color: transparent; opacity: 1; position: relative; top: -30px; width: 100%; height: 30px; z-index: 10; } .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 .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-FullWidthContent { width: 100%; } .RV-FullWidthContent__Item { width: 100%; } .RV-FlexRow { display: flex; height: 100%; --width: 100px; --localBreakPoint: 500px; --mediaBreakPoint: 100vw; } .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-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(i), .RV-FlexRow--breakPoint *:first-child:nth-last-child(i)~* { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (2 * var(--spacing-inner))); } .RV-FlexRow--breakPoint:only-child { min-width: calc((var(--localBreakPoint) - (var(--spacing-inner) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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) * (i - 1))) / i - (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-FlexGrid { --item-height: 300px; --item-width: 300px; display: grid; grid-template-columns: repeat(auto-fill, var(var(--item-width))); } .RV-FlexGrid__Item { height: calc(var(--item-height) - calc(2*var(--inner-spacing))); } .RV-FlexGrid__Item > * { height: 100%; width: 100%; } .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; width: 100%; height: unset; margin-bottom: var(--inner-spacing); } .RV-FlexGrid--masonry .RV-FlexGrid__Item > * { height: auto; } .RV-FlexGrid--verticalMasonry { display: block; column-count: auto; column-width: var(--item-width); } .RV-FlexGrid--verticalMasonry .RV-FlexGrid__Item { display: inline-block; height: unset; margin-bottom: var(--inner-spacing); } .RV-FlexGrid--verticalMasonry .RV-FlexGrid__Item > * { height: auto; } .RV-FlexGrid--horizontalMasonry { display: flex; flex-direction: row; flex-wrap: wrap; } .RV-FlexGrid--horizontalMasonry .RV-FlexGrid__Item { height: calc(var(--item-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); width: calc(max-content - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-Fan { --base-height: 280px; --base-width: 320px; --inner-spacing: 0px; display: flex; position: relative; min-width: min-content; } .RV-Fan__Surface { 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))); min-width: calc(calc(var(--base-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); flex-grow: 20; flex-shrink: 0; flex-basis: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .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-grow: 0; flex-shrink: 0; flex-basis: auto; } .RV-Fan--fullWidth { flex-flow: row wrap; min-width: initial; min-width: min-content; } .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))); flex-grow: unset; flex-basis: unset; } .RV-Fan--fullWidth .RV-Fan__Base { flex-grow: 1; } .RV-Fan--fullWidth .RV-Fan__Surface { flex-grow: 1; min-width: calc(calc(var(--base-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-Fan--vertical { flex-direction: column; width: max-content; min-width: initial; } .RV-Fan--vertical .RV-Fan__Surface { width: calc(var(--base-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); min-width: initial; min-height: var(--base-height); } .RV-Fan--horizontal { flex-direction: row; } .RV-Fan--horizontal .RV-Fan__Surface { min-width: calc(calc(var(--base-width) * 1.5) - 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; min-width: initial; } .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))); flex-grow: unset; flex-basis: unset; } .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-Spacing__Outer--small { --outer-spacing: 10px; margin: var(--outer-spacing); } .RV-Spacing__Outer--small * > { --outer-spacing: 0; } .RV-Spacing__Outer--medium { --outer-spacing: 25px; margin: var(--outer-spacing); } .RV-Spacing__Outer--medium * > { --outer-spacing: 0; } .RV-Spacing__Outer--large { --outer-spacing: 35px; margin: var(--outer-spacing); } .RV-Spacing__Outer--large * > { --outer-spacing: 0; } .RV-Spacing__Inner--small { --inner-spacing: 10px; padding: var(--inner-spacing); gap: var(--inner-spacing); column-gap: var(--inner-spacing); } .RV-Spacing__Inner--small * > { --inner-spacing: 0; } .RV-Spacing__Inner--medium { --inner-spacing: 25px; padding: var(--inner-spacing); gap: var(--inner-spacing); column-gap: var(--inner-spacing); } .RV-Spacing__Inner--medium * > { --inner-spacing: 0; } .RV-Spacing__Inner--large { --inner-spacing: 35px; padding: var(--inner-spacing); gap: var(--inner-spacing); column-gap: var(--inner-spacing); } .RV-Spacing__Inner--large * > { --inner-spacing: 0; } .RV-ElementList { display: flex; height: 100%; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; --inner-spacing: 0px; --outer-spacing: 0px; list-style-type: none; } .RV-ElementList__Item { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; } .RV-BoxShadow { --color: #6b5690; position: relative; background-color: #fff; } .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-BoxShadow:before, .RV-BoxShadow:after { content: ''; position: absolute; z-index: -2; } .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; } .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-Button { --size: 25px; margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; --inner-spacing: 0px; --outer-spacing: 0px; background-color: #f00; line-height: 1; overflow: hidden; font-family: sans-serif; background-color: #aac7da; color: #fbd974; text-decoration: none; align-items: center; display: inline-flex; border-radius: 6px; } .RV-Button__Icon { width: min-content; background-color: #457b9d; padding: var(var(--size)); } .RV-Button__Icon .RV-Image { height: calc(var(--size) * 2.5); } .RV-Button__Icon--outwardsArrow { margin-right: calc(var(--size) * 1.2); margin-right: calc(var(--size) * 2); } .RV-Button__Icon--outwardsArrow, .RV-Button__Icon--outwardsArrow * { z-index: 10; position: relative; } .RV-Button__Icon--outwardsArrow:after, .RV-Button__Icon--outwardsArrow:before { content: ''; width: 50%; height: 110%; z-index: 5; background-color: inherit; position: absolute; } .RV-Button__Icon--outwardsArrow .RV-Image { left: calc(var(--size) * 0.7); } .RV-Button__Icon--outwardsArrow:after { transform: rotate(35deg); left: 70%; top: 25%; } .RV-Button__Icon--outwardsArrow:before { transform: rotate(-35deg); left: 70%; top: -37%; } .RV-Button__Icon--inwardsArrow { margin-right: calc(var(--size) * 1.2); } .RV-Button__Icon--inwardsArrow, .RV-Button__Icon--inwardsArrow * { z-index: 10; position: relative; } .RV-Button__Icon--inwardsArrow:after, .RV-Button__Icon--inwardsArrow:before { content: ''; width: 50%; height: 110%; z-index: 5; background-color: inherit; position: absolute; } .RV-Button__Icon--inwardsArrow .RV-Image { left: calc(var(--size) * 0.5); } .RV-Button__Icon--inwardsArrow:after { transform: rotate(-35deg); left: 70%; top: 25%; } .RV-Button__Icon--inwardsArrow:before { transform: rotate(35deg); left: 70%; top: -35%; } .RV-Button__Icon--forwardSlope { margin-right: calc(var(--size) * 2); margin-right: calc(var(--size) * 1.2); } .RV-Button__Icon--forwardSlope .RV-Image { left: calc(var(--size) * 0.7); } .RV-Button__Icon--forwardSlope:after { transform: rotate(-15deg); top: 0%; } .RV-Button__Icon--forwardSlope, .RV-Button__Icon--forwardSlope * { z-index: 10; position: relative; } .RV-Button__Icon--forwardSlope:after, .RV-Button__Icon--forwardSlope:before { content: ''; width: 50%; height: 110%; z-index: 5; background-color: inherit; position: absolute; } .RV-Button__Icon--backwardSlope { margin-right: calc(var(--size) * 2); margin-right: calc(var(--size) * 1.2); } .RV-Button__Icon--backwardSlope .RV-Image { left: calc(var(--size) * 0.7); } .RV-Button__Icon--backwardSlope:after { transform: rotate(15deg); top: -10%; } .RV-Button__Icon--backwardSlope, .RV-Button__Icon--backwardSlope * { z-index: 10; position: relative; } .RV-Button__Icon--backwardSlope:after, .RV-Button__Icon--backwardSlope:before { content: ''; width: 50%; height: 110%; z-index: 5; background-color: inherit; position: absolute; } .RV-Button__Text { font-size: calc(var(--size) * 1.65); background-color: #aac7da; padding: var(var(--size)); } .RV-Button--pill { border-radius: calc(var(--size) + var(--line-height) * 16px); padding-left: calc(1.5 * var(--size)); padding-right: calc(1.5 * var(--size)); } .RV-Button--link { border: none; border-radius: 0px; color: #457b9d; } .RV-Button--link, .RV-Button--link * { background-color: transparent; margin: 0; } .RV-Button--link .RV-Button__Icon { padding-right: calc(var(--size) / 4); padding-left: calc(var(--size) / 4); } .RV-Button--small { --size: 10px; } .RV-Button--small .RV-Button__Icon .RV-Image { height: calc(var(--size) * 1.8); } .RV-Button--medium { --size: 15px; } .RV-Button--large { --size: 17.5px; } .RV-Button--border { border: 3px solid #457b9d; color: #457b9d; border-radius: 0px; } .RV-Button--border, .RV-Button--border * { background-color: transparent; } .RV-Button--border .RV-Button__Icon { background-color: #aac7da; } .RV-OverlayButton__Item { position: relative; } .RV-OverlayButton__Item:hover > * { opacity: 1; } .RV-OverlayButton__Button { text-align: center; display: inline-block; position: absolute; background-color: #f5f5dc; margin: 10px; opacity: 0.2; border-radius: 10px; text-decoration: none; align-items: center; justify-content: center; width: 50px; height: 50px; font-size: 25px; line-height: 25px; } .RV-OverlayButton__Button--circle { border-radius: 50%; } .RV-OverlayButton__Button--topRight { right: 0; top: 0; } .RV-OverlayButton__Button--small { width: 30px; height: 30px; font-size: 15px; line-height: 15px; } .RV-OverlayButton__Button--medium { width: 50px; height: 50px; font-size: 25px; line-height: 25px; } .RV-OverlayButton__Button--large { width: 70px; height: 70px; font-size: 35px; line-height: 35px; } .RV-OverlayButton__Row { align-items: center; justify-content: center; --inner-spacing: 25px; padding: var(--inner-spacing); gap: var(--inner-spacing); column-gap: var(--inner-spacing); position: absolute; bottom: 0; height: 4em; opacity: 0.2; width: 100%; justify-content: center; background-color: rgba(255,255,255,0.5); padding-left: 0; padding-right: 0; } .RV-OverlayButton__Row * > { --inner-spacing: 0; } .RV-OverlayButton__Row * { position: initial; opacity: initial; margin: 0; padding: 0; } .RV-Teaser { --image-height: 300px; --image-width: 300px; --shadow-color: #6b5690; display: flex; position: relative; min-width: min-content; position: relative; background-color: #fff; position: relative; box-shadow: 0 1px 4px var(--shadow-color); flex-flow: row wrap; min-width: initial; min-width: min-content; } .RV-Teaser__Image { height: calc(var(--image-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); width: calc(var(--image-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); flex-grow: 0; flex-shrink: 0; flex-basis: auto; } .RV-Teaser__Preview { overflow: hidden; height: calc(var(--image-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); width: calc(100% - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); min-width: calc(calc(var(--image-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); flex-grow: 20; flex-shrink: 0; flex-basis: calc(var(--image-width) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); --inner-spacing: 25px; padding: var(--inner-spacing); gap: var(--inner-spacing); column-gap: var(--inner-spacing); display: flex; height: 100%; flex-direction: column; } .RV-Teaser__Preview * > { --inner-spacing: 0; } .RV-Teaser__Text { color: #1f271b; flex: 1; 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-Teaser__Text .RV-Image { width: 100%; height: 100%; object-fit: cover; display: block; } .RV-Teaser__Text .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-Teaser__Text:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: '###'; color: transparent; opacity: 1; position: relative; top: -30px; width: 100%; height: 30px; z-index: 10; } .RV-Teaser__Text .RV-Text { height: 100%; } .RV-Teaser__Headline { font-family: sans-serif; color: #457b9d; justify-self: center; } .RV-Teaser__Buttons { flex-basis: max-content; flex-grow: 3; flex-shrink: 3; flex-grow: 0; flex-shrink: 0; flex-basis: max-content; --inner-spacing: 10px; padding: var(--inner-spacing); gap: var(--inner-spacing); column-gap: var(--inner-spacing); display: flex; height: 100%; flex-direction: row; padding: 0; } .RV-Teaser__Buttons * > { --inner-spacing: 0; } .RV-Teaser__Preview { min-width: calc(calc(var(--image-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); width: calc(calc(100% - var(--image-width)) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); height: calc(var(--image-height) - (2 * var(--inner-spacing)) - (2 * var(--outer-spacing))); flex-grow: unset; flex-basis: unset; } .RV-Teaser__Image { flex-grow: 1; } .RV-Teaser__Preview { flex-grow: 1; min-width: calc(calc(var(--image-width) * 1.5) - calc(2 * var(--inner-spacing)) - calc(2 * var(--outer-spacing))); } .RV-Teaser:before, .RV-Teaser:after { content: ''; position: absolute; z-index: -2; } .RV-Teaser:after { box-shadow: 0 0 40px var(--shadow-color); bottom: 0px; left: 10%; right: 10%; width: 80%; height: 50%; border-radius: 100%; } .RV-AspectRatio { position: relative; overflow: hidden; height: unset; width: unset; } .RV-AspectRatio * { object-fit: cover; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-AspectRatio--1to2 { --aspectX: 1; --aspectY: 2; padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); } .RV-AspectRatio--1to2:last-child { margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); } .RV-AspectRatio--1to2:only-child { margin-bottom: 0px; } .RV-AspectRatio--2to1 { --aspectX: 2; --aspectY: 1; padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); } .RV-AspectRatio--2to1:last-child { margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); } .RV-AspectRatio--2to1:only-child { margin-bottom: 0px; } .RV-AspectRatio--3to2 { --aspectX: 3; --aspectY: 2; padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); } .RV-AspectRatio--3to2:last-child { margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); } .RV-AspectRatio--3to2:only-child { margin-bottom: 0px; } .RV-AspectRatio--4to3 { --aspectX: 4; --aspectY: 3; padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); } .RV-AspectRatio--4to3:last-child { margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); } .RV-AspectRatio--4to3:only-child { margin-bottom: 0px; } .RV-AspectRatio--16to9 { --aspectX: 16; --aspectY: 9; padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); } .RV-AspectRatio--16to9:last-child { margin-bottom: calc(-1 * 100% * calc(var(--aspectY) / var(--aspectX)) + var(--outer-spacing)); } .RV-AspectRatio--16to9:only-child { margin-bottom: 0px; } .RV-FocalPoint { --focalX: 50%; --focalY: 50%; height: 100%; width: 100%; object-fit: cover; object-position: var(--focalX) var(--focalY); } .RV-FocalPoint--upperHalf { --focalY: 25%; } .RV-FocalPoint--lowerHalf { --focalY: 75%; } .RV-FocalPoint--leftHalf { --focalX: 25%; } .RV-FocalPoint--rightHalf { --focalX: 75%; } .RV-Shape--square { padding-top: 100%; width: 100%; position: relative; } .RV-Shape--square * { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Shape--circle { padding-top: 100%; width: 100%; position: relative; } .RV-Shape--circle, .RV-Shape--circle * { border-radius: 50%; } .RV-Shape--circle * { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .RV-Truncation { --line-height: 1.3; --height: 350px; display: block; overflow: hidden; position: relative; 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-Truncation * { overflow: hidden; display: block; position: relative; text-overflow: ellipsis; background-color: #fff; line-height: 1.3; max-height: 332.8px; padding: 0; margin: 0; } .RV-Truncation--fade:after { background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff); display: block; content: '###'; color: transparent; opacity: 1; position: absolute; top: calc(var(--height) - 60px); width: 100%; height: 50px; line-height: var(var(--line-height)); z-index: 10; } .RV-Truncation--ellipsis:after { position: absolute; display: block; right: 0; content: '...'; background-color: #fff; padding-left: 5px; padding-bottom: 10px; box-shadow: -10px 8px 6px 0px #fff; line-height: var(var(--line-height)); top: calc(var(--height) - 40px); } * { margin: 0; padding: 0; top: 0; bottom: 0; left: 0; right: 0; border: none; gap: 0; --inner-spacing: 0px; --outer-spacing: 0px; }