Using rcss

components/01_Atoms/input/_input.scss

@@ -39,6 +39,8 @@
     .LP-Input__Label{
         font-family: $-primary-sans-serif-font;
 		font-size: 16px;
+		white-space: wrap;
+		overflow: hidden;
     }
 
     .LP-Input__Message{
@@ -48,6 +50,7 @@
         padding: 3px;
         position: relative;
 		top: -$-margin-bottom;
+		overflow: hidden;
     }
 
     &--error{

components/03_Organisms/form/_form.scss

@@ -1,23 +1,15 @@
 .LP-Form{
-    flex-direction: column;
-    align-items: center;
-
-	&--inline{
-		padding: 0 10px;
-		.LP-Form__Fieldset{
-			.LP-Form__Composition{
-				gap: 10px;
-			}
-		}
-	}
 
     .LP-Form__Fieldset{
-        border: none;
+		@include RV-Reset;
-		padding: 0;
-		margin: 0;
         max-width: 1200px;
 		min-width: $-viewport-medium;
 		
+		@media(max-width: $-viewport-medium){
+			min-width: unset;
+		}
+	}
+
 	.LP-Form__Legend{
 		margin: 0;
 		padding: 0;
@@ -25,54 +17,35 @@
 		font-size: 21px;
 	}
 
-	}
-	
 	.LP-Form__Composition{
-		display: flex;
+		@include RV-FlexRow__Container;
-		flex-direction: row;
+		@include RV-Spacing__Inner--small('');
-		justify-content: space-between;
-		gap: 30px;
 
-		&--buttons{
+		&--breakable {
-			gap: 10px;
+			@media(max-width: $-viewport-small){
+				@include RV-FlexRow__Container--multiRow;
+			}
 		}
 
-		.LP-Form__Field{
+		@media(max-width: $-viewport-extra-small){
-			flex: 3 2 100px;
+			@include RV-FlexRow__Container--multiRow;
-			padding: 6px 0;
-
-			&--wider{
-				flex: 5 2;
-			}
-
-			&--wide{
-				flex: 4 2;
-			}
-
-			&--narrow{
-				flex: 2 1;
-			}
-
-			&--narrower{
-				flex: 1 2;
-			}
-			
-			&--static{
-				flex: 0 0;
-			}
 		}
 
 		&--buttons{
 			justify-content: flex-end;
+			@include RV-Spacing__Inner--small;
+		}
+	}
+
+	.LP-Form__Field{
+		@include RV-FlexRow__Item;
 	}
 
 	.LP-Form__Button{
-			flex-grow: 0;
+		@include RV-FlexRow__Item--fixedSize(130px);
-			padding-left: 0;
-			min-width: 130px;
 
-			.LP-Link{
+		@media(max-width: $-viewport-extra-small) {
-				display:contents;
+			@include RV-FlexRow__Item--fixedSize(100%);
 		}
 	}
 	
@@ -83,52 +56,3 @@
 		}
 	}
 }
-}
-
-@media(max-width: $-viewport-medium){
-.LP-Form{
-    .LP-Form__Fieldset{
-        min-width: unset;
-    }
-}
-}
-
-@media(max-width: $-viewport-small){
-    .LP-Form{
-        .LP-Form__Fieldset{
-            .LP-Form__Composition--breakable{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-            }
-        }
-    }
-}
-
-@media(max-width: $-viewport-extra-small){
-    .LP-Form :not(.LP-Form--inline){
-        .LP-Form__Fieldset{
-            .LP-Form__Composition{
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-
-                .LP-Form__Field{
-                    
-                    &:not(.LP-Form__Button){
-                        flex: 3 1 100px;
-                        padding: 12px 15px;
-                    }
-                }
-                
-                .LP-Form__Button{
-                    padding: 0 15px;
-                }
-                
-                &--buttons{
-                    justify-content: flex-end;
-                }
-            }
-        }
-    }
-}

components/03_Organisms/form/form.hbs

@@ -30,8 +30,8 @@
                 <input type="text" id="input123" class="LP-Input__Field"/>
                 <span class="LP-Input__Message">We won't send any stalkers, promise</span>
             </div>
-            <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
+            <div class="LP-Form__Field LP-Form__Field--narrower LP-Input">
-                <label for="input123" class="LP-Input__Label">House no</label>
+                <label for="input123" class="LP-Input__Label">No.</label>
                 <input type="text" id="input123" class="LP-Input__Field"/>
                 <span class="LP-Input__Message">Field is required</span>
             </div>
@@ -45,7 +45,7 @@
 
         <div class="LP-Form__Composition">
             <div class="LP-Form__Field LP-Form__Field--narrow LP-Input">
-                <label for="input123" class="LP-Input__Label">Postal Code</label>
+                <label for="input123" class="LP-Input__Label">ZIP</label>
                 <input type="text" id="input123" class="LP-Input__Field"/>
             </div>
             <div class="LP-Form__Field LP-Form__Field--wide LP-Input">

components/03_Organisms/imageGrid/_imageGrid.scss

@@ -1,42 +1,9 @@
 .LP-ImageGrid{
-
+	@include RV-FlexGrid(290px, 200px);
-    .LP-ImageGrid__List{
+	@include RV-ElementList;
-        list-style-type: none;
+	@include RV-Spacing__Inner--small;
-        display: grid;
-        grid-template-columns: repeat(auto-fit, 300px);
-        align-content: space-around;
-        justify-content: center;
-        margin: 0px;
-        padding: 0px;
-    }
 
     .LP-ImageGrid__Item {
-        margin-top:10px;
+		@include RV-ContentCrop;
-    }
-
-    .LP-Link{
-        overflow: hidden;
-    }
-
-    .LP-Image {
-        box-shadow: 0 0 5px $-grey;
-        height: 200px;
-        width: 290px;
-        object-fit: cover;
-    }
-}
-
-@media(max-width: $-viewport-small){
-    .LP-ImageGrid{
-        .LP-ImageGrid__List{
-            grid-template-columns: 1fr;
-
-            .LP-Image{
-                box-shadow: 0 0 5px $-grey;
-                height: auto;
-                width: 100%;
-                object-fit: cover;
-            }
-        }
     }
 }

components/03_Organisms/imageGrid/imageGrid.hbs

@@ -1,6 +1,6 @@
 
 <div class="LP-ImageGrid">
-    <ul class="LP-ImageGrid__List">
+    <ul class="LP-ImageGrid__Container">
         {{#each images}}
         <li class="LP-ImageGrid__Item">
             <a href="#" class="LP-Link"><img  class="LP-Image" src="{{this}}"></a>

components/03_Organisms/linkList/_linkList.scss

@@ -1,89 +1,23 @@
-.LP-LinkList__List{
+.LP-LinkList{
-    list-style-type: none;
+	@include RV-FlexGrid(300px, 3em);
-    display: grid;
+	@include RV-ElementList;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	@include RV-Spacing__Inner--small;
-    margin: 0;
-    padding: 0;
 
     .LP-LinkList__Item{
 		border-left: 1px solid $-light-brown;
 		width: calc(100% - 1px);
-        margin-top: 12px;
+		overflow: hidden;
-        position: relative;
+		&:hover {
-
+			background-color: $-almost-white;
-        &--add{
-            .LP-LinkList__AddTrigger{
-				display: none;
-				&:checked{
-					& ~ .LP-LinkList__AddPlaceHolder{
-						visibility: hidden;
-					}
-					& ~ .LP-LinkList__Add{
-					display: block;
-					}
-				}
-            }
-            
-            .LP-LinkList__Add{
-                position: absolute;
-                top: 3px;
-				display: none;
-				width: 100%;
-
-                .LP-Form__Fieldset{
-                    min-width:unset;
-                }
-
-                .LP-Form{
-                    display: block;
-                    min-width: 0px;
-                }
 		}
 	}
 	
 	.LP-Link{
-            $-link-padding: 1em;
+		height: 100%;
-            padding: $-link-padding 0 $-link-padding $-link-padding;
+		@include RV-Alignment--verticalCenter;
-            width: calc(100% - 1em);
-            display: block;
-            color: $-grey;
 
-
+		>* {
-            &--iconized{
+			@include RV-Spacing__Inner--small;
-                padding-top: 0;
-                padding-bottom: 1.1em;
-
-                &:hover{
-                    background-color: #ccc !important;
-                }
-
-                .LP-Text{
-                    padding-top: .1em;
-                }
-            }
-
-
-            &:hover{
-                background-color: $-almost-white;
-                color: $-wine-red;
-            }
-
-            .LP-Text{
-                color: inherit;
 		}
 	}
 }
-}
-
-.LP-Link__Icon{
-    width: 2em;
-    height: 2em;
-    fill: $-wine-red;
-    line-height: 5em;
-}
-
-.LP-LinkList__Item .LP-Link__Icon{
-    position: relative;
-    top: .7em;
-    margin-right: .6em;
-}

components/03_Organisms/linkList/linkList.hbs

@@ -1,43 +1,24 @@
-
 <div class="LP-LinkList">
-    <ul class="LP-LinkList__List">
+	<ul class="LP-LinkList__Container">
 		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
 		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
 		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">TIM Online</span></a></li>
 		<li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">Google Maps</span></a></li>
-        <li class="LP-LinkList__Item"><a href="#" class="LP-Link"><span class="LP-Text">OSM</span></a></li>
+		<li class="LP-LinkList__Item">
-        <li class="LP-LinkList__Item LP-LinkList__Item--add">
+			<a href="#" class="LP-Link">
-            <input type="checkbox" id="wurstwurst" class="LP-LinkList__AddTrigger"/>
+
-            <label for="wurstwurst" class="LP-LinkList__AddPlaceHolder">
+					<div class="RV-Iconized__Container RV-Iconized__Container--medium">
-				<span class="LP-Link LP-Link--iconized">
+						<svg class="RV-Iconized__Icon" version="1.1" id="Capa_1"
-					<div class="LP-Link__IconWrapper">
+							xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-					<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+							y="0px" viewBox="0 0 512 512" xml:space="preserve">
-						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
-						xml:space="preserve">
 							<g>
 								<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
 	v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
 							</g>
 						</svg>
+					<span class="RV-Iconized__Text">Link hinzufügen</span>
 				</div>
-					<span class="LP-Text">Link hinzufügen</span>
+			</a>
-				</span>
-            </label>
-			<span class="LP-LinkList__Add">
-				<form class="LP-Form LP-Form--inline">
-					<fieldset class="LP-Form__Fieldset">
-						<div class="LP-Form__Composition LP-Form__Composition">
-							<div class="LP-Form__Field LP-Form__Field--static LP-Input">
-								<button class="LP-Button">Add</button>
-							</div>
-							<div class="LP-Form__Field LP-Form__Field--wide LP-Input">
-								<input class="LP-Input__Field" type="url"/>
-							</div>
-							</div>
-						</div>
-					</fieldset>
-				</form>
-			</span>
 		</li>
 	</ul>
 </div>

components/main.scss

@@ -1,3 +1,5 @@
+@import './rcss.bundled.scss';
+
 @font-face {
     font-family: Crimson;
     src:

components/rcss.bundled.scss

@@ -0,0 +1,562 @@
+// Padding and Margin sizes
+
+$-spacing-small: 10px;
+$-spacing-medium: 25px;
+$-spacing-large: 35px;
+
+.pink {
+	background-color: pink;
+}
+@mixin RV-Reset {
+	margin: 0;
+	padding: 0;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	border: none;
+}
+@mixin RV-Alignment--top {
+	display: grid;
+	align-content: start;
+}
+
+@mixin RV-Alignment--bottom {
+	display: grid;
+	align-content: end;
+}
+
+@mixin RV-Alignment--left {
+	display: grid;
+	justify-content: start;
+}
+
+@mixin RV-Alignment--right {
+	display: grid;
+	justify-content: end;
+}
+
+@mixin RV-Alignment--horizontalCenter {
+	display: grid;
+	justify-content: center;
+}
+
+@mixin RV-Alignment--verticalCenter {
+	display: grid;
+	align-content: center;
+}
+
+@mixin RV-Alignment--center {
+	@include RV-Alignment--horizontalCenter;
+	@include RV-Alignment--verticalCenter;
+}
+
+@mixin RV-Alignment__Container {
+	display: grid;
+
+	&--top {
+		@include RV-Alignment--top;
+	}
+
+	&--bottom {
+		@include RV-Alignment--bottom;
+	}
+
+	&--left {
+		@include RV-Alignment--left;
+	}
+
+	&--right {
+		@include RV-Alignment--right;
+	}
+
+	&--horizontalCenter {
+		@include RV-Alignment--horizontalCenter;
+	}
+
+	&--verticalCenter {
+		@include RV-Alignment--verticalCenter;
+	}
+
+	&--center {
+		@include RV-Alignment--center;
+	}
+}
+
+@mixin RV-Alignment {
+	&__Container {
+		@include RV-Alignment__Container;
+	}
+}
+
+.RV-Alignment {
+	@include RV-Alignment;
+}
+
+
+@mixin RV-FlexRow__Container--column {
+	display: flex;
+	flex-direction: column;
+}
+
+@mixin RV-FlexRow__Container--multiRow {
+	flex-wrap: wrap;
+}
+
+@mixin RV-FlexRow__Container {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-around;
+
+	&--multiRow {
+		@include RV-FlexRow__Container--multiRow;
+	}
+
+	&--column {
+		@include RV-FlexRow__Container--column;
+	}
+}
+
+@mixin RV-FlexRow__Item--normal {
+	flex-grow: 3;
+	flex-shrink: 3;
+}
+
+@mixin RV-FlexRow__Item--narrower {
+	flex-grow: 1;
+	flex-shrink: 5;
+}
+
+@mixin RV-FlexRow__Item--narrow {
+	flex-grow: 2;
+	flex-shrink: 4;
+}
+
+@mixin RV-FlexRow__Item--wide {
+	flex-grow: 4;
+	flex-shrink: 2;
+}
+@mixin RV-FlexRow__Item--wider {
+	flex-grow: 5;
+	flex-shrink: 1;
+}
+@mixin RV-FlexRow__Item--fixedSize($-width: 100px) {
+	flex-grow: 0;
+	flex-shrink: 0;
+	width: min-content;
+	flex-basis: $-width;
+}
+
+@mixin RV-FlexRow__Item {
+	@include RV-Alignment;
+
+	min-width: 0;
+	width: 100%;
+
+	&,&--normal {
+		@include RV-FlexRow__Item--normal;
+	}
+
+	&--narrower {
+		@include RV-FlexRow__Item--narrower;
+	}
+
+	&--narrow {
+		@include RV-FlexRow__Item--narrow;
+	}
+
+	&--wide {
+		@include RV-FlexRow__Item--wide;
+	}
+
+	&--wider {
+		@include RV-FlexRow__Item--wider;
+	}
+
+	&--fixedSize {
+		@include RV-FlexRow__Item--fixedSize;
+	}
+}
+
+@mixin RV-FlexRow {
+	&__Container {
+		@include RV-FlexRow__Container;
+	}
+
+	&__Item {
+		@include RV-FlexRow__Item;
+	}
+}
+
+.RV-FlexRow{
+	@include RV-FlexRow;
+}
+@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr));
+	grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr));
+	grid-auto-rows: minmax($-item_height, 1fr);
+}
+
+@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) {
+	&__Container {
+		@include RV-FlexGrid__Container($-item_width, $-item_height);
+	}
+
+	&__Item {
+		@include RV-Alignment;
+	}
+}
+
+.RV-FlexGrid{
+	@include RV-FlexGrid;
+}
+
+@mixin RV-ContentCrop--bottom {
+	img {
+		object-position: botom;
+	}
+}
+
+@mixin RV-ContentCrop--top {
+	img {
+		object-position: top;
+	}
+}
+
+@mixin RV-ContentCrop--right {
+	img {
+		object-position: right;
+	}
+}
+
+@mixin RV-ContentCrop--left {
+	img {
+		object-position: left;
+	}
+}
+
+@mixin RV-ContentCrop--center {
+	img {
+		object-position: center;
+	}
+}
+
+@mixin RV-ContentCrop{
+	&,* {
+		overflow: hidden;
+		word-break: break-all;
+	}
+
+	img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	&--left {
+		@include RV-ContentCrop--left;
+	}
+
+	&--center {
+		@include RV-ContentCrop--center;
+	}
+
+	&--top {
+		@include RV-ContentCrop--top;
+	}
+
+	&--bottom {
+		@include RV-ContentCrop--bottom;
+	}
+
+	&--center {
+		@include RV-ContentCrop--center;
+	}
+}
+
+.RV-ContentCrop__Container {
+	@include RV-ContentCrop;
+}
+@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') {
+	
+	&__Container#{$-suffix} {
+		flex-direction: row;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		min-width: $-base_width;
+		height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') {
+	&__Container#{$-suffix} {
+		flex-direction: column;
+		width:max-content;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		width: $-base_width;
+		min-height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') {
+
+	&__Container#{$-suffix} {
+		flex-flow: row wrap;
+	}
+
+	&__Container#{$-suffix} &__Surface {
+		width: calc(100% - #{$-base_width});
+		min-width: $-base-width;
+		height: $-base_height;
+	}
+}
+
+@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') {
+	&__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface {
+		flex-grow: 1;
+	}
+}
+
+@mixin RV-Fan ($-base_height, $-base_width) {
+	@include RV-Fan--vertical($-base_height, $-base_width, '--vertical');
+	@include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal');
+	@include RV-Fan--auto($-base_height, $-base_width, '--auto');
+	@include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth');
+
+	&__Container {
+		display: flex;
+	}
+
+	&__Base {
+		height: $-base_height;
+		width: $-base_width;
+		flex: 0 0 auto;
+	}
+
+	&__Surface {
+		@include RV-ContentCrop;
+	}
+}
+
+.RV-Fan {
+	@include RV-Fan(280px, 320px);
+}
+@mixin RV-FullWidthContent__Container {
+	width: 100%;
+}
+
+@mixin RV-FullWidthContent__Item {
+	width: 100%;
+        @include RV-ContentCrop;
+}
+
+@mixin RV-FullWidthContent {
+    &__Container {
+        @include RV-FullWidthContent__Container;
+    }
+
+    &__Item {
+		@include RV-FullWidthContent__Item;
+    }
+}
+
+.RV-FullWidthContent {
+    @include RV-FullWidthContent;
+}
+@mixin RV-BoxShadow($color) {
+
+    position:relative;
+    float:left;
+    width:40%;
+    margin:2em 10px 4em; 
+    background:#fff;
+    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+
+    &:before, &:after {
+        content:"";
+        position:absolute; 
+        z-index:-2;
+    }
+
+    &--simple {
+        box-shadow: 0 0 20px $color;
+    }
+
+    &--raised {
+        &:after {
+            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+        }
+    }
+
+    &--liftedCorners {
+          
+        &:before, &:after {
+            bottom:15px;
+            left:10px;
+            width:50%;
+            height:20%;
+            max-width:300px;
+            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+            transform:rotate(-3deg);
+        }
+          
+        &:after{
+            right:10px; 
+            left:auto;
+            transform:rotate(3deg);
+        }
+    }
+}
+
+.RV-BoxShadow {
+    @include RV-BoxShadow(#6b5690);
+}
+@mixin RV-ElementList {
+    &__Container {
+        list-style-type: none;
+        @include RV-Reset;
+    }
+
+    &__Item {
+        @include RV-Reset;
+    }
+}
+
+.RV-ElementList {
+    @include RV-ElementList;
+}
+@mixin RV-Spacing__Outer--small {
+    margin: $-spacing-small;
+}
+
+@mixin RV-Spacing__Outer--medium {
+    margin: $-spacing-medium;
+}
+
+@mixin RV-Spacing__Outer--large {
+    margin: $-spacing-large;
+}
+
+
+@mixin RV-Spacing__Inner--small($-container-suffix: '__Container')  {
+	padding: $-spacing-small;
+	&#{$-container-suffix} {
+		gap: $-spacing-small;
+	}
+}
+
+@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container')  {
+    padding: $-spacing-medium;
+    &#{$-container-suffix} {
+		gap: $-spacing-medium;
+	}
+}
+
+@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') {
+    padding: $-spacing-large;
+    &#{$-container-suffix} {
+		gap: $-spacing-large;
+	}
+}
+
+@mixin RV-Spacing {
+    &__Outer{
+        &--small {
+            @include RV-Spacing__Outer--small;
+        }
+
+        &--medium {
+            @include RV-Spacing__Outer--medium;
+        }
+
+        &--large {
+            @include RV-Spacing__Outer--large;
+        }
+    }
+
+    &__Inner{
+        &--small {
+            @include RV-Spacing__Inner--small('');
+        }
+
+        &--medium {
+            @include RV-Spacing__Inner--medium('');
+        }
+
+        &--large {
+            @include RV-Spacing__Inner--large('');
+        }
+    }
+}
+
+.RV-Spacing {
+    @include RV-Spacing;
+}
+.RV-Iconized {
+	&__Container {
+		position: relative;
+
+		&--medium {
+			top: -.5em;
+		}
+
+		&--large {
+			top: -1.03073em;
+		}
+
+		&--huge {
+			top: -2.05em;
+		}
+	}
+
+	&__Icon {
+		@include RV-Reset;
+	}
+
+	&__Container--small &__Icon{
+		width: 1em;
+		height: 1em;
+		position: relative;
+		top: .125em;
+	}
+	&__Container--medium &__Icon{
+		width: 2em;
+		height: 2em;
+		position: relative;
+		top: .625em;
+	}
+	&__Container--large &__Icon{
+		width: 3em;
+		height: 3em;
+		position: relative;
+		top: 1.15573em;
+	}
+	&__Container--huge &__Icon{
+		width: 5em;
+		height: 5em;
+		position: relative;
+		top: 2.175em;
+	}
+}
+
+@mixin RV-ImageGrid {
+    @include RV-ElementList;
+    @include RV-FlexGrid;
+
+    &__Container {
+        @include RV-Spacing__Inner--medium;
+    }
+
+    &__Item {
+        @include RV-ContentCrop;
+        @include RV-ContentCrop--center;
+    }
+}
+
+.RV-ImageGrid {
+    @include RV-ImageGrid;
+}

public/icons/plus.svg

@@ -0,0 +1,8 @@
+					<svg class="LP-Link__Icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
+						xml:space="preserve">
+						<g>
+							<path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,0-20,8.954-20,20s8.954,20,20,20h216
+			v216c0,11.046,8.954,20,20,20s20-8.954,20-20V276h216c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
+						</g>
+					</svg>

public/main.css

@@ -1,3 +1,424 @@
+.pink {
+  background-color: pink; }
+
+.RV-Alignment__Container {
+  display: grid; }
+  .RV-Alignment__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-Alignment__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-Alignment__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-Alignment__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-Alignment__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-Alignment__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-Alignment__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-FlexRow__Container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around; }
+  .RV-FlexRow__Container--multiRow {
+    flex-wrap: wrap; }
+  .RV-FlexRow__Container--column {
+    display: flex;
+    flex-direction: column; }
+
+.RV-FlexRow__Item {
+  min-width: 0;
+  width: 100%; }
+  .RV-FlexRow__Item__Container {
+    display: grid; }
+    .RV-FlexRow__Item__Container--top {
+      display: grid;
+      align-content: start; }
+    .RV-FlexRow__Item__Container--bottom {
+      display: grid;
+      align-content: end; }
+    .RV-FlexRow__Item__Container--left {
+      display: grid;
+      justify-content: start; }
+    .RV-FlexRow__Item__Container--right {
+      display: grid;
+      justify-content: end; }
+    .RV-FlexRow__Item__Container--horizontalCenter {
+      display: grid;
+      justify-content: center; }
+    .RV-FlexRow__Item__Container--verticalCenter {
+      display: grid;
+      align-content: center; }
+    .RV-FlexRow__Item__Container--center {
+      display: grid;
+      justify-content: center;
+      display: grid;
+      align-content: center; }
+  .RV-FlexRow__Item, .RV-FlexRow__Item--normal {
+    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--fixedSize {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: min-content;
+    flex-basis: 100px; }
+
+.RV-FlexGrid__Container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
+  grid-auto-rows: minmax(300px, 1fr); }
+
+.RV-FlexGrid__Item__Container {
+  display: grid; }
+  .RV-FlexGrid__Item__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-FlexGrid__Item__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-FlexGrid__Item__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-FlexGrid__Item__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-FlexGrid__Item__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-FlexGrid__Item__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-FlexGrid__Item__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-ContentCrop__Container, .RV-ContentCrop__Container * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-ContentCrop__Container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-ContentCrop__Container--left img {
+  object-position: left; }
+
+.RV-ContentCrop__Container--center img {
+  object-position: center; }
+
+.RV-ContentCrop__Container--top img {
+  object-position: top; }
+
+.RV-ContentCrop__Container--bottom img {
+  object-position: botom; }
+
+.RV-ContentCrop__Container--center img {
+  object-position: center; }
+
+.RV-Fan__Container--vertical {
+  flex-direction: column;
+  width: max-content; }
+
+.RV-Fan__Container--vertical .RV-Fan__Surface {
+  width: 320px;
+  min-height: 280px; }
+
+.RV-Fan__Container--horizontal {
+  flex-direction: row; }
+
+.RV-Fan__Container--horizontal .RV-Fan__Surface {
+  min-width: 320px;
+  height: 280px; }
+
+.RV-Fan__Container--auto {
+  flex-flow: row wrap; }
+
+.RV-Fan__Container--auto .RV-Fan__Surface {
+  width: calc(100% - 320px);
+  min-width: 320px;
+  height: 280px; }
+
+.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface {
+  flex-grow: 1; }
+
+.RV-Fan__Container {
+  display: flex; }
+
+.RV-Fan__Base {
+  height: 280px;
+  width: 320px;
+  flex: 0 0 auto; }
+
+.RV-Fan__Surface, .RV-Fan__Surface * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-Fan__Surface img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-Fan__Surface--left img {
+  object-position: left; }
+
+.RV-Fan__Surface--center img {
+  object-position: center; }
+
+.RV-Fan__Surface--top img {
+  object-position: top; }
+
+.RV-Fan__Surface--bottom img {
+  object-position: botom; }
+
+.RV-Fan__Surface--center img {
+  object-position: center; }
+
+.RV-FullWidthContent__Container {
+  width: 100%; }
+
+.RV-FullWidthContent__Item {
+  width: 100%; }
+  .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * {
+    overflow: hidden;
+    word-break: break-all; }
+  .RV-FullWidthContent__Item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; }
+  .RV-FullWidthContent__Item--left img {
+    object-position: left; }
+  .RV-FullWidthContent__Item--center img {
+    object-position: center; }
+  .RV-FullWidthContent__Item--top img {
+    object-position: top; }
+  .RV-FullWidthContent__Item--bottom img {
+    object-position: botom; }
+  .RV-FullWidthContent__Item--center img {
+    object-position: center; }
+
+.RV-BoxShadow {
+  position: relative;
+  float: left;
+  width: 40%;
+  margin: 2em 10px 4em;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  .RV-BoxShadow:before, .RV-BoxShadow:after {
+    content: "";
+    position: absolute;
+    z-index: -2; }
+  .RV-BoxShadow--simple {
+    box-shadow: 0 0 20px #6b5690; }
+  .RV-BoxShadow--raised:after {
+    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after {
+    bottom: 15px;
+    left: 10px;
+    width: 50%;
+    height: 20%;
+    max-width: 300px;
+    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
+    transform: rotate(-3deg); }
+  .RV-BoxShadow--liftedCorners:after {
+    right: 10px;
+    left: auto;
+    transform: rotate(3deg); }
+
+.RV-ElementList__Container {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ElementList__Item {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-Spacing__Outer--small {
+  margin: 10px; }
+
+.RV-Spacing__Outer--medium {
+  margin: 25px; }
+
+.RV-Spacing__Outer--large {
+  margin: 35px; }
+
+.RV-Spacing__Inner--small {
+  padding: 10px; }
+  .RV-Spacing__Inner--small {
+    gap: 10px; }
+
+.RV-Spacing__Inner--medium {
+  padding: 25px; }
+  .RV-Spacing__Inner--medium {
+    gap: 25px; }
+
+.RV-Spacing__Inner--large {
+  padding: 35px; }
+  .RV-Spacing__Inner--large {
+    gap: 35px; }
+
+.RV-Iconized__Container {
+  position: relative; }
+  .RV-Iconized__Container--medium {
+    top: -.5em; }
+  .RV-Iconized__Container--large {
+    top: -1.03073em; }
+  .RV-Iconized__Container--huge {
+    top: -2.05em; }
+
+.RV-Iconized__Icon {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-Iconized__Container--small .RV-Iconized__Icon {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  top: .125em; }
+
+.RV-Iconized__Container--medium .RV-Iconized__Icon {
+  width: 2em;
+  height: 2em;
+  position: relative;
+  top: .625em; }
+
+.RV-Iconized__Container--large .RV-Iconized__Icon {
+  width: 3em;
+  height: 3em;
+  position: relative;
+  top: 1.15573em; }
+
+.RV-Iconized__Container--huge .RV-Iconized__Icon {
+  width: 5em;
+  height: 5em;
+  position: relative;
+  top: 2.175em; }
+
+.RV-ImageGrid__Container {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ImageGrid__Item {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ImageGrid__Container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
+  grid-auto-rows: minmax(300px, 1fr); }
+
+.RV-ImageGrid__Item__Container {
+  display: grid; }
+  .RV-ImageGrid__Item__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-ImageGrid__Item__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-ImageGrid__Item__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-ImageGrid__Item__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-ImageGrid__Item__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-ImageGrid__Item__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-ImageGrid__Item__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-ImageGrid__Container {
+  padding: 25px; }
+  .RV-ImageGrid__Container__Container {
+    gap: 25px; }
+
+.RV-ImageGrid__Item, .RV-ImageGrid__Item * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-ImageGrid__Item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-ImageGrid__Item--left img {
+  object-position: left; }
+
+.RV-ImageGrid__Item--center img {
+  object-position: center; }
+
+.RV-ImageGrid__Item--top img {
+  object-position: top; }
+
+.RV-ImageGrid__Item--bottom img {
+  object-position: botom; }
+
+.RV-ImageGrid__Item--center img {
+  object-position: center; }
+
+.RV-ImageGrid__Item img {
+  object-position: center; }
+
 @font-face {
   font-family: Crimson;
   src: url("fonts/Crimson/CrimsonText-Regular.ttf"), url("fonts/Crimson/CrimsonText-Bold.ttf"), url("fonts/Crimson/CrimsonText-Italic.ttf"); }
@@ -199,14 +620,17 @@ body {
         color: #f9f9f9; }
   .LP-Input .LP-Input__Label {
     font-family: Montserrat, Helvetica, sans-serif;
-    font-size: 16px; }
+    font-size: 16px;
+    white-space: wrap;
+    overflow: hidden; }
   .LP-Input .LP-Input__Message {
     font-family: Montserrat, Helvetica, sans-serif;
     font-style: italic;
     font-size: 13px;
     padding: 3px;
     position: relative;
-    top: -30px; }
+    top: -30px;
+    overflow: hidden; }
   .LP-Input--error .LP-Input__Field {
     margin-bottom: 25px;
     border-bottom: 2px solid #76323F;
@@ -583,61 +1007,71 @@ body {
 .LP-PlaceList .LP-Pagination {
   margin-top: 50px; }
 
-.LP-LinkList__List {
+.LP-LinkList {
-  list-style-type: none;
+  padding: 10px; }
+  .LP-LinkList__Container {
     display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-rows: repeat(auto-fill, minmax(3em, 1fr));
+    grid-auto-rows: minmax(3em, 1fr); }
+  .LP-LinkList__Item__Container {
+    display: grid; }
+    .LP-LinkList__Item__Container--top {
+      display: grid;
+      align-content: start; }
+    .LP-LinkList__Item__Container--bottom {
+      display: grid;
+      align-content: end; }
+    .LP-LinkList__Item__Container--left {
+      display: grid;
+      justify-content: start; }
+    .LP-LinkList__Item__Container--right {
+      display: grid;
+      justify-content: end; }
+    .LP-LinkList__Item__Container--horizontalCenter {
+      display: grid;
+      justify-content: center; }
+    .LP-LinkList__Item__Container--verticalCenter {
+      display: grid;
+      align-content: center; }
+    .LP-LinkList__Item__Container--center {
+      display: grid;
+      justify-content: center;
+      display: grid;
+      align-content: center; }
+  .LP-LinkList__Container {
+    list-style-type: none;
     margin: 0;
-  padding: 0; }
+    padding: 0;
-  .LP-LinkList__List .LP-LinkList__Item {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: none; }
+  .LP-LinkList__Item {
+    margin: 0;
+    padding: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: none; }
+  .LP-LinkList__Container {
+    gap: 10px; }
+  .LP-LinkList .LP-LinkList__Item {
     border-left: 1px solid #C09F80;
     width: calc(100% - 1px);
-    margin-top: 12px;
+    overflow: hidden; }
-    position: relative; }
+    .LP-LinkList .LP-LinkList__Item:hover {
-    .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger {
+      background-color: #f9f9f9; }
-      display: none; }
+  .LP-LinkList .LP-Link {
-      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__AddPlaceHolder {
+    height: 100%;
-        visibility: hidden; }
+    display: grid;
-      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__AddTrigger:checked ~ .LP-LinkList__Add {
+    align-content: center; }
-        display: block; }
+    .LP-LinkList .LP-Link > * {
-    .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add {
+      padding: 10px; }
-      position: absolute;
+      .LP-LinkList .LP-Link > *__Container {
-      top: 3px;
+        gap: 10px; }
-      display: none;
-      width: 100%; }
-      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form__Fieldset {
-        min-width: unset; }
-      .LP-LinkList__List .LP-LinkList__Item--add .LP-LinkList__Add .LP-Form {
-        display: block;
-        min-width: 0px; }
-    .LP-LinkList__List .LP-LinkList__Item .LP-Link {
-      padding: 1em 0 1em 1em;
-      width: calc(100% - 1em);
-      display: block;
-      color: #565656; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized {
-        padding-top: 0;
-        padding-bottom: 1.1em; }
-        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized:hover {
-          background-color: #ccc !important; }
-        .LP-LinkList__List .LP-LinkList__Item .LP-Link--iconized .LP-Text {
-          padding-top: .1em; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
-        background-color: #f9f9f9;
-        color: #76323F; }
-      .LP-LinkList__List .LP-LinkList__Item .LP-Link .LP-Text {
-        color: inherit; }
-
-.LP-Link__Icon {
-  width: 2em;
-  height: 2em;
-  fill: #76323F;
-  line-height: 5em; }
-
-.LP-LinkList__Item .LP-Link__Icon {
-  position: relative;
-  top: .7em;
-  margin-right: .6em; }
 
 .LP-Footer {
   margin-top: 75px;
@@ -660,108 +1094,183 @@ body {
         .LP-Footer .LP-LinkList__List .LP-LinkList__Item .LP-Link:hover {
           background-color: inherit; }
 
-.LP-Form {
-  flex-direction: column;
-  align-items: center; }
-  .LP-Form--inline {
-    padding: 0 10px; }
-    .LP-Form--inline .LP-Form__Fieldset .LP-Form__Composition {
-      gap: 10px; }
 .LP-Form .LP-Form__Fieldset {
-    border: none;
-    padding: 0;
   margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none;
   max-width: 1200px;
   min-width: 750px; }
-    .LP-Form .LP-Form__Fieldset .LP-Form__Legend {
-      margin: 0;
-      padding: 0;
-      font-family: Montserrat, Helvetica, sans-serif;
-      font-size: 21px; }
-  .LP-Form .LP-Form__Composition {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 30px; }
-    .LP-Form .LP-Form__Composition--buttons {
-      gap: 10px; }
-    .LP-Form .LP-Form__Composition .LP-Form__Field {
-      flex: 3 2 100px;
-      padding: 6px 0; }
-      .LP-Form .LP-Form__Composition .LP-Form__Field--wider {
-        flex: 5 2; }
-      .LP-Form .LP-Form__Composition .LP-Form__Field--wide {
-        flex: 4 2; }
-      .LP-Form .LP-Form__Composition .LP-Form__Field--narrow {
-        flex: 2 1; }
-      .LP-Form .LP-Form__Composition .LP-Form__Field--narrower {
-        flex: 1 2; }
-      .LP-Form .LP-Form__Composition .LP-Form__Field--static {
-        flex: 0 0; }
-    .LP-Form .LP-Form__Composition--buttons {
-      justify-content: flex-end; }
-    .LP-Form .LP-Form__Composition .LP-Form__Button {
-      flex-grow: 0;
-      padding-left: 0;
-      min-width: 130px; }
-      .LP-Form .LP-Form__Composition .LP-Form__Button .LP-Link {
-        display: contents; }
-    .LP-Form .LP-Form__Composition .LP-Form__InfoText .LP-Paragraph {
-      font-family: Montserrat, Helvetica, sans-serif;
-      color: #565656; }
-
   @media (max-width: 750px) {
     .LP-Form .LP-Form__Fieldset {
       min-width: unset; } }
 
-@media (max-width: 650px) {
+.LP-Form .LP-Form__Legend {
-  .LP-Form .LP-Form__Fieldset .LP-Form__Composition--breakable {
+  margin: 0;
-    display: flex;
+  padding: 0;
-    flex-direction: column;
+  font-family: Montserrat, Helvetica, sans-serif;
-    justify-content: space-between; } }
+  font-size: 21px; }
 
+.LP-Form .LP-Form__Composition {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: 10px; }
+  .LP-Form .LP-Form__Composition--multiRow {
+    flex-wrap: wrap; }
+  .LP-Form .LP-Form__Composition--column {
+    display: flex;
+    flex-direction: column; }
+  .LP-Form .LP-Form__Composition {
+    gap: 10px; }
+  @media (max-width: 650px) {
+    .LP-Form .LP-Form__Composition--breakable {
+      flex-wrap: wrap; } }
   @media (max-width: 450px) {
-  .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition {
+    .LP-Form .LP-Form__Composition {
-    display: flex;
+      flex-wrap: wrap; } }
-    flex-direction: column;
+  .LP-Form .LP-Form__Composition--buttons {
-    justify-content: space-between; }
+    justify-content: flex-end;
-    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Field:not(.LP-Form__Button) {
+    padding: 10px; }
-      flex: 3 1 100px;
+    .LP-Form .LP-Form__Composition--buttons__Container {
-      padding: 12px 15px; }
+      gap: 10px; }
-    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition .LP-Form__Button {
-      padding: 0 15px; }
-    .LP-Form :not(.LP-Form--inline) .LP-Form__Fieldset .LP-Form__Composition--buttons {
-      justify-content: flex-end; } }
 
-.LP-ImageGrid .LP-ImageGrid__List {
+.LP-Form .LP-Form__Field {
-  list-style-type: none;
+  min-width: 0;
+  width: 100%; }
+  .LP-Form .LP-Form__Field__Container {
+    display: grid; }
+    .LP-Form .LP-Form__Field__Container--top {
+      display: grid;
+      align-content: start; }
+    .LP-Form .LP-Form__Field__Container--bottom {
+      display: grid;
+      align-content: end; }
+    .LP-Form .LP-Form__Field__Container--left {
+      display: grid;
+      justify-content: start; }
+    .LP-Form .LP-Form__Field__Container--right {
+      display: grid;
+      justify-content: end; }
+    .LP-Form .LP-Form__Field__Container--horizontalCenter {
+      display: grid;
+      justify-content: center; }
+    .LP-Form .LP-Form__Field__Container--verticalCenter {
+      display: grid;
+      align-content: center; }
+    .LP-Form .LP-Form__Field__Container--center {
       display: grid;
-  grid-template-columns: repeat(auto-fit, 300px);
-  align-content: space-around;
       justify-content: center;
-  margin: 0px;
+      display: grid;
-  padding: 0px; }
+      align-content: center; }
+  .LP-Form .LP-Form__Field, .LP-Form .LP-Form__Field--normal {
+    flex-grow: 3;
+    flex-shrink: 3; }
+  .LP-Form .LP-Form__Field--narrower {
+    flex-grow: 1;
+    flex-shrink: 5; }
+  .LP-Form .LP-Form__Field--narrow {
+    flex-grow: 2;
+    flex-shrink: 4; }
+  .LP-Form .LP-Form__Field--wide {
+    flex-grow: 4;
+    flex-shrink: 2; }
+  .LP-Form .LP-Form__Field--wider {
+    flex-grow: 5;
+    flex-shrink: 1; }
+  .LP-Form .LP-Form__Field--fixedSize {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: min-content;
+    flex-basis: 100px; }
 
-.LP-ImageGrid .LP-ImageGrid__Item {
+.LP-Form .LP-Form__Button {
-  margin-top: 10px; }
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: min-content;
+  flex-basis: 130px; }
+  @media (max-width: 450px) {
+    .LP-Form .LP-Form__Button {
+      flex-grow: 0;
+      flex-shrink: 0;
+      width: min-content;
+      flex-basis: 100%; } }
 
-.LP-ImageGrid .LP-Link {
+.LP-Form .LP-Form__InfoText .LP-Paragraph {
-  overflow: hidden; }
+  font-family: Montserrat, Helvetica, sans-serif;
+  color: #565656; }
 
-.LP-ImageGrid .LP-Image {
+.LP-ImageGrid {
-  box-shadow: 0 0 5px #565656;
+  padding: 10px; }
-  height: 200px;
+  .LP-ImageGrid__Container {
-  width: 290px;
+    display: grid;
-  object-fit: cover; }
+    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
-
+    grid-template-rows: repeat(auto-fill, minmax(200px, 1fr));
-@media (max-width: 650px) {
+    grid-auto-rows: minmax(200px, 1fr); }
-  .LP-ImageGrid .LP-ImageGrid__List {
+  .LP-ImageGrid__Item__Container {
-    grid-template-columns: 1fr; }
+    display: grid; }
-    .LP-ImageGrid .LP-ImageGrid__List .LP-Image {
+    .LP-ImageGrid__Item__Container--top {
-      box-shadow: 0 0 5px #565656;
+      display: grid;
-      height: auto;
+      align-content: start; }
+    .LP-ImageGrid__Item__Container--bottom {
+      display: grid;
+      align-content: end; }
+    .LP-ImageGrid__Item__Container--left {
+      display: grid;
+      justify-content: start; }
+    .LP-ImageGrid__Item__Container--right {
+      display: grid;
+      justify-content: end; }
+    .LP-ImageGrid__Item__Container--horizontalCenter {
+      display: grid;
+      justify-content: center; }
+    .LP-ImageGrid__Item__Container--verticalCenter {
+      display: grid;
+      align-content: center; }
+    .LP-ImageGrid__Item__Container--center {
+      display: grid;
+      justify-content: center;
+      display: grid;
+      align-content: center; }
+  .LP-ImageGrid__Container {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: none; }
+  .LP-ImageGrid__Item {
+    margin: 0;
+    padding: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    border: none; }
+  .LP-ImageGrid__Container {
+    gap: 10px; }
+  .LP-ImageGrid .LP-ImageGrid__Item, .LP-ImageGrid .LP-ImageGrid__Item * {
+    overflow: hidden;
+    word-break: break-all; }
+  .LP-ImageGrid .LP-ImageGrid__Item img {
     width: 100%;
-      object-fit: cover; } }
+    height: 100%;
+    object-fit: cover; }
+  .LP-ImageGrid .LP-ImageGrid__Item--left img {
+    object-position: left; }
+  .LP-ImageGrid .LP-ImageGrid__Item--center img {
+    object-position: center; }
+  .LP-ImageGrid .LP-ImageGrid__Item--top img {
+    object-position: top; }
+  .LP-ImageGrid .LP-ImageGrid__Item--bottom img {
+    object-position: botom; }
+  .LP-ImageGrid .LP-ImageGrid__Item--center img {
+    object-position: center; }
 
 .LP-MainContainer {
   margin: 0 auto;

public/rcss.bundled.css

@@ -0,0 +1,416 @@
+.pink {
+  background-color: pink; }
+
+.RV-Alignment__Container {
+  display: grid; }
+  .RV-Alignment__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-Alignment__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-Alignment__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-Alignment__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-Alignment__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-Alignment__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-Alignment__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-FlexRow__Container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around; }
+  .RV-FlexRow__Container--multiRow {
+    flex-wrap: wrap; }
+
+.RV-FlexRow__Item {
+  min-width: 0;
+  width: 100%; }
+  .RV-FlexRow__Item__Container {
+    display: grid; }
+    .RV-FlexRow__Item__Container--top {
+      display: grid;
+      align-content: start; }
+    .RV-FlexRow__Item__Container--bottom {
+      display: grid;
+      align-content: end; }
+    .RV-FlexRow__Item__Container--left {
+      display: grid;
+      justify-content: start; }
+    .RV-FlexRow__Item__Container--right {
+      display: grid;
+      justify-content: end; }
+    .RV-FlexRow__Item__Container--horizontalCenter {
+      display: grid;
+      justify-content: center; }
+    .RV-FlexRow__Item__Container--verticalCenter {
+      display: grid;
+      align-content: center; }
+    .RV-FlexRow__Item__Container--center {
+      display: grid;
+      justify-content: center;
+      display: grid;
+      align-content: center; }
+  .RV-FlexRow__Item, .RV-FlexRow__Item--normal {
+    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--fixedSize {
+    flex-grow: 0;
+    flex-shrink: 0;
+    width: min-content; }
+
+.RV-FlexGrid__Container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-rows: repeat(auto-fill, 300px);
+  grid-auto-rows: 300px; }
+
+.RV-FlexGrid__Item__Container {
+  display: grid; }
+  .RV-FlexGrid__Item__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-FlexGrid__Item__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-FlexGrid__Item__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-FlexGrid__Item__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-FlexGrid__Item__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-FlexGrid__Item__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-FlexGrid__Item__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-ContentCrop__Container, .RV-ContentCrop__Container * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-ContentCrop__Container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-ContentCrop__Container--left img {
+  object-position: left; }
+
+.RV-ContentCrop__Container--center img {
+  object-position: center; }
+
+.RV-ContentCrop__Container--top img {
+  object-position: top; }
+
+.RV-ContentCrop__Container--bottom img {
+  object-position: botom; }
+
+.RV-ContentCrop__Container--center img {
+  object-position: center; }
+
+.RV-Fan__Container--vertical {
+  flex-direction: column;
+  width: max-content; }
+
+.RV-Fan__Container--vertical .RV-Fan__Surface {
+  width: 320px;
+  min-height: 280px; }
+
+.RV-Fan__Container--horizontal {
+  flex-direction: row; }
+
+.RV-Fan__Container--horizontal .RV-Fan__Surface {
+  min-width: 320px;
+  height: 280px; }
+
+.RV-Fan__Container--auto {
+  flex-flow: row wrap; }
+
+.RV-Fan__Container--auto .RV-Fan__Surface {
+  width: calc(100% - 320px);
+  min-width: 320px;
+  height: 280px; }
+
+.RV-Fan__Container--fullWidth .RV-Fan__Base, .RV-Fan__Container--fullWidth .RV-Fan__Surface {
+  flex-grow: 1; }
+
+.RV-Fan__Container {
+  display: flex; }
+
+.RV-Fan__Base {
+  height: 280px;
+  width: 320px;
+  flex: 0 0 auto; }
+
+.RV-Fan__Surface, .RV-Fan__Surface * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-Fan__Surface img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-Fan__Surface--left img {
+  object-position: left; }
+
+.RV-Fan__Surface--center img {
+  object-position: center; }
+
+.RV-Fan__Surface--top img {
+  object-position: top; }
+
+.RV-Fan__Surface--bottom img {
+  object-position: botom; }
+
+.RV-Fan__Surface--center img {
+  object-position: center; }
+
+.RV-FullWidthContent__Container {
+  width: 100%; }
+
+.RV-FullWidthContent__Item {
+  width: 100%; }
+  .RV-FullWidthContent__Item, .RV-FullWidthContent__Item * {
+    overflow: hidden;
+    word-break: break-all; }
+  .RV-FullWidthContent__Item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; }
+  .RV-FullWidthContent__Item--left img {
+    object-position: left; }
+  .RV-FullWidthContent__Item--center img {
+    object-position: center; }
+  .RV-FullWidthContent__Item--top img {
+    object-position: top; }
+  .RV-FullWidthContent__Item--bottom img {
+    object-position: botom; }
+  .RV-FullWidthContent__Item--center img {
+    object-position: center; }
+
+.RV-BoxShadow {
+  position: relative;
+  float: left;
+  width: 40%;
+  margin: 2em 10px 4em;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  .RV-BoxShadow:before, .RV-BoxShadow:after {
+    content: "";
+    position: absolute;
+    z-index: -2; }
+  .RV-BoxShadow--simple {
+    box-shadow: 0 0 20px #6b5690; }
+  .RV-BoxShadow--raised:after {
+    box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; }
+  .RV-BoxShadow--liftedCorners:before, .RV-BoxShadow--liftedCorners:after {
+    bottom: 15px;
+    left: 10px;
+    width: 50%;
+    height: 20%;
+    max-width: 300px;
+    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
+    transform: rotate(-3deg); }
+  .RV-BoxShadow--liftedCorners:after {
+    right: 10px;
+    left: auto;
+    transform: rotate(3deg); }
+
+.RV-ElementList__Container {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ElementList__Item {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-Spacing__Outer--small {
+  margin: 10px; }
+
+.RV-Spacing__Outer--medium {
+  margin: 25px; }
+
+.RV-Spacing__Outer--large {
+  margin: 35px; }
+
+.RV-Spacing__Inner--small {
+  padding: 10px; }
+  .RV-Spacing__Inner--small {
+    gap: 10px; }
+
+.RV-Spacing__Inner--medium {
+  padding: 25px; }
+  .RV-Spacing__Inner--medium {
+    gap: 25px; }
+
+.RV-Spacing__Inner--large {
+  padding: 35px; }
+  .RV-Spacing__Inner--large {
+    gap: 35px; }
+
+.RV-Iconized__Container {
+  position: relative; }
+  .RV-Iconized__Container--medium {
+    top: -.5em; }
+  .RV-Iconized__Container--large {
+    top: -1.03073em; }
+  .RV-Iconized__Container--huge {
+    top: -2.05em; }
+
+.RV-Iconized__Icon {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-Iconized__Container--small .RV-Iconized__Icon {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  top: .125em; }
+
+.RV-Iconized__Container--medium .RV-Iconized__Icon {
+  width: 2em;
+  height: 2em;
+  position: relative;
+  top: .625em; }
+
+.RV-Iconized__Container--large .RV-Iconized__Icon {
+  width: 3em;
+  height: 3em;
+  position: relative;
+  top: 1.15573em; }
+
+.RV-Iconized__Container--huge .RV-Iconized__Icon {
+  width: 5em;
+  height: 5em;
+  position: relative;
+  top: 2.175em; }
+
+.RV-ImageGrid__Container {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ImageGrid__Item {
+  margin: 0;
+  padding: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: none; }
+
+.RV-ImageGrid__Container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-rows: repeat(auto-fill, 300px);
+  grid-auto-rows: 300px; }
+
+.RV-ImageGrid__Item__Container {
+  display: grid; }
+  .RV-ImageGrid__Item__Container--top {
+    display: grid;
+    align-content: start; }
+  .RV-ImageGrid__Item__Container--bottom {
+    display: grid;
+    align-content: end; }
+  .RV-ImageGrid__Item__Container--left {
+    display: grid;
+    justify-content: start; }
+  .RV-ImageGrid__Item__Container--right {
+    display: grid;
+    justify-content: end; }
+  .RV-ImageGrid__Item__Container--horizontalCenter {
+    display: grid;
+    justify-content: center; }
+  .RV-ImageGrid__Item__Container--verticalCenter {
+    display: grid;
+    align-content: center; }
+  .RV-ImageGrid__Item__Container--center {
+    display: grid;
+    justify-content: center;
+    display: grid;
+    align-content: center; }
+
+.RV-ImageGrid__Container {
+  padding: 25px; }
+  .RV-ImageGrid__Container__Container {
+    gap: 25px; }
+
+.RV-ImageGrid__Item, .RV-ImageGrid__Item * {
+  overflow: hidden;
+  word-break: break-all; }
+
+.RV-ImageGrid__Item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; }
+
+.RV-ImageGrid__Item--left img {
+  object-position: left; }
+
+.RV-ImageGrid__Item--center img {
+  object-position: center; }
+
+.RV-ImageGrid__Item--top img {
+  object-position: top; }
+
+.RV-ImageGrid__Item--bottom img {
+  object-position: botom; }
+
+.RV-ImageGrid__Item--center img {
+  object-position: center; }
+
+.RV-ImageGrid__Item img {
+  object-position: center; }