From abe1c0a4dcb3d25cff1131468abc6843de998783 Mon Sep 17 00:00:00 2001
From: rayelliott <rayelliott@git.rayelliott.dev>
Date: Wed, 3 Jun 2020 17:32:23 +0000
Subject: [PATCH] update

---
 src/scss/_feature-sunset.scss | 110 ++++++++++++++++++++++++++++++++++
 src/scss/_featured.scss       |  95 ++++++++++++++++++++---------
 src/scss/style.scss           |   1 +
 3 files changed, 179 insertions(+), 27 deletions(-)
 create mode 100644 src/scss/_feature-sunset.scss

diff --git a/src/scss/_feature-sunset.scss b/src/scss/_feature-sunset.scss
new file mode 100644
index 0000000..76bc743
--- /dev/null
+++ b/src/scss/_feature-sunset.scss
@@ -0,0 +1,110 @@
+body.rwavw-custom {
+	.widget.rwavw-feature-sunset {
+		.pure-g {
+			> div:first-child {
+				padding: 20px 80px;
+			}
+		}
+
+		h2, h3, h4, h5, h6 {
+			position: relative;
+			margin-bottom: 44px;
+		}
+
+		.gallery-link {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		@media (max-width: 630px) {
+			.pure-g {
+				> div {
+					&:first-child {
+						padding: 11px 35px;
+					}
+				}
+			}
+
+			h2, h3, h4, h5, h6 {
+				font-size: 28px;
+				margin-bottom: 22px;
+			}
+
+			p {
+				font-size: 18px;
+			}
+		}
+
+		@media (max-width: 63.98em) {
+
+			.pure-g {
+
+				> div {
+					position: relative;
+					&:first-child {
+						position: absolute;
+						width: 100%;
+						max-width: 728px;
+						margin-left: auto;
+						margin-right: auto;
+						height: 100%;
+						top: 0;
+						left: 50%;
+						transform: translateX(-50%);
+
+						display: flex;
+						flex-direction: column;
+						justify-content: flex-end;
+						align-items: flex-start;
+					}
+				}
+			}
+
+			h2, h3, h4, h5, h6, p {
+				color: #fff;
+			}
+		}
+
+		@media (min-width: 64em) {
+			h2, h3, h4, h5, h6, p {
+				text-align: right !important;
+			}
+
+			h2, h3, h4, h5, h6 {
+
+				&::before {
+					$bg-color: rgb(3, 41, 109);
+					z-index: -1;
+					content: '';
+					display: block;
+					position: absolute;
+					width: 230%;
+					height: 300%;
+					top: 48px;
+					left: -22px;
+
+					border-radius: 3px;
+
+					background-image: linear-gradient(
+						140deg,
+						rgba($bg-color, 0.01),
+						rgba($bg-color, 0.05)
+					);
+				}
+			}
+
+			.pure-g {
+				> div:first-child {
+					z-index: 5;
+				}
+
+				> div:last-child {
+					z-index: 10;
+					max-width: 40em;
+				}
+			}
+		}
+	}
+}
+
diff --git a/src/scss/_featured.scss b/src/scss/_featured.scss
index 434c486..56dc71d 100644
--- a/src/scss/_featured.scss
+++ b/src/scss/_featured.scss
@@ -39,14 +39,19 @@ body.rwavw-custom {
 			flex-direction: column;
 			justify-content: center;
 			align-items: stretch;
+		}
 
-			&:first-child {
-				padding-right: 44px;
+		@media (min-width: 67.98em) {
+			.pure-g > div {
+				&:first-child {
+					padding-right: 44px;
+				}
+
+				&:last-child {
+					padding-left: 44px;
+				}
 			}
 
-			&:last-child {
-				padding-left: 44px;
-			}
 		}
 	}
 
@@ -97,47 +102,83 @@ body.rwavw-custom {
 	}
 
 	.widget.rwavw-feature-limits {
+		h2, h3, h4, h5, h6 {
+			margin-top: 44px;
+
+			@media (min-width: 64em) {
+				margin-top: 0;
+				text-align: left !important;
+			}
+		}
 	}
 
 	.widget.rwavw-feature-sunset {
 		.pure-g {
 			> div:first-child {
-				z-index: 5;
+				z-index: 10;
 			}
 
 			> div:last-child {
-				z-index: 10;
+				z-index: 5;
 			}
 		}
 
 		.h2, h3, h4, h5, h6 {
 			position: relative;
-			text-align: right !important;
 			margin-bottom: 44px;
+		}
 
-			&::before {
-				$color: rgb(3, 41, 109);
-				z-index: -1;
-				content: '';
-				display: block;
-				position: absolute;
-				width: 230%;
-				height: 300%;
-				top: 48px;
-				left: -22px;
+		@media (max-width: 63.98em) {
+			.pure-g {
 
-				border-radius: 3px;
-
-				background-image: linear-gradient(
-					140deg,
-					rgba($color, 0.01),
-					rgba($color, 0.05)
-				);
+				> div {
+					position: relative;
+					&:first-child {
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						top: 0;
+						left: 0;
+					}
+				}
 			}
 		}
 
-		p {
-			text-align: right !important;
+		@media (min-width: 64em) {
+			h2, h3, h4, h5, h6, p {
+				text-align: right !important;
+			}
+
+			h2, h3, h4, h5, h6 {
+
+				&::before {
+					$color: rgb(3, 41, 109);
+					z-index: -1;
+					content: '';
+					display: block;
+					position: absolute;
+					width: 230%;
+					height: 300%;
+					top: 48px;
+					left: -22px;
+
+					border-radius: 3px;
+
+					background-image: linear-gradient(
+						140deg,
+						rgba($color, 0.01),
+						rgba($color, 0.05)
+					);
+				}
+			}
+
+			> div:first-child {
+				z-index: 10;
+			}
+
+			> div:last-child {
+				z-index: 5;
+			}
 		}
 	}
 
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 58aab0c..593a475 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,5 +1,6 @@
 @import "hero";
 @import "featured";
+@import "feature-sunset";
 @import "contact";
 @import "faq";
 @import "footer";