Mainly finish making design responsive

new/index.html

@@ -163,6 +163,7 @@
 					</div>
 				</div>
 
+				<div class="wrapper">
 					<div class="sponsorship-primer">
 						<h3>sponsored by <b>users like you</b></h3>
 						<p>
@@ -171,6 +172,7 @@
 						<a href="/sponsor" class="button purple">See sponsorships</a>
 					</div>
 				</div>
+			</div>
 
 			<section class="light">
 				<div class="section-upset">

new/resources/css/common.css

@@ -581,6 +581,7 @@ footer .nostalgia-badges {
 	justify-content: center;
 	width: 100%;
 	display: flex;
+	flex-wrap: wrap;
 }
 
 footer .nostalgia p {

new/resources/css/features.css

@@ -3,6 +3,10 @@
 	padding-bottom: 50px;
 }
 
+h3 {
+	margin-left: 0;
+}
+
 /* .datagrid {
 	display: flex;
 	flex-wrap: wrap;
@@ -45,7 +49,6 @@
 
 .feature-row {
 	display: grid;
-	grid: auto / 1fr 2fr 1fr;
 	gap: 2em;
 	padding: 2em 0;
 	border-bottom: 2px dashed #a4c8ff25; /* #e6eaf0 */
@@ -105,11 +108,10 @@
 	flex: 1;
 	margin-right: 50px;
 	min-width: 0;
-	min-width: 300px;
 }
 
-.split img {
+.split picture {
-	max-width: 100%;
+	min-width: 0;
 }
 
 .split img,
@@ -122,13 +124,26 @@
 
 
 
-/* TODO: Figure this out */
-@media (max-width: 800px) {
-	.feature-row {
-		grid: repeat(3,auto) / 1fr 1fr;
-	}
 
+
+
+@media (min-width: 600px) and (max-width: 899px) {
+	.feature-row .detail {
+		grid-area: 1/2/span 3/2;
+	}
 	.feature-row .benefits {
 		grid-area: 2 / 1;
 	}
 }
+
+@media (min-width: 600px) {
+	.feature-row {
+		grid: repeat(3,auto) / 1fr 1fr;
+	}
+}
+
+@media (min-width: 900px) {
+	.feature-row {
+		grid: auto / 1fr 2fr 1fr;
+	}
+}

new/resources/css/marketing.css

@@ -218,23 +218,6 @@ section.light.gray {
 	line-height: 1.65;
 }
 
-.sides {
-	display: flex;
-	gap: 50px;
-	align-items: center;
-	margin: 100px 0;
-}
-
-.sides > * {
-	flex: 1;
-}
-
-.side-flex {
-	display: flex;
-	gap: 2em;
-	flex: 1.5;
-}
-
 
 .cols, .spacing {
 	--gap: 50px;
@@ -259,16 +242,13 @@ section.dark .cols {
 	color: #aec6c3;
 }
 
+
 .cols .col {
 	min-width: 350px;
 	padding-left: 1em;
 	flex: 1;
 }
 
-.cols-big .col {
-	min-width: 450px;
-}
-
 h3 {
 	font-weight: 600;
 	font-size: 20px;
@@ -366,6 +346,10 @@ section.dark h3.yellow {
 	max-width: none;
 }
 
+.asides h3 {
+	margin-left: 0;
+}
+
 .asides p {
 	margin-left: 0;
 	margin-right: 0;
@@ -650,10 +634,16 @@ div.ap-wrapper:fullscreen div.ap-player {
 }
 
 @media (max-width: 1000px) {
+	h1,
+	h2 {
+		overflow-wrap: anywhere;
+	}
+	h1 {
+		font-size: 75px;
+	}
 	.asides {
 		flex-direction: column;
 	}
-
 	.display {
 		margin-top: 50px;
 		margin-bottom: 50px;

new/resources/css/sponsor.css

@@ -7,7 +7,7 @@ p.footnote {
 	--plan-border: 1px solid #eceff133;
 	border: var(--plan-border);
 	border-radius: 10px;
-	width: 50%;
+	flex: 1;
 	display: flex;
 	flex-direction: column;
 }
@@ -194,3 +194,40 @@ ul.check li.minus::before {
 	position: relative;
 	z-index: 2;
 }
+
+
+
+
+.sides {
+	display: flex;
+	gap: 50px;
+	align-items: center;
+	margin: 100px 0;
+}
+
+.sides > * {
+	flex: 1;
+}
+
+.side-flex {
+	display: flex;
+	gap: 2em;
+	flex: 1.5;
+}
+
+
+
+
+
+
+@media (max-width: 1150px) {
+	.sides {
+		flex-direction: column;
+	}
+}
+
+@media (max-width: 700px) {
+	.side-flex {
+		flex-direction: column;
+	}
+}

new/sponsor.html

@@ -481,7 +481,7 @@
 					<p>
 						The original author of Caddy, Matt Holt, operates Dyanim, LLC to maintain the project and direct development alongside a global community. Sponsorships are fulfilled by Dyanim, LLC.
 					</p>
-					<div class="cols cols-big">
+					<div class="cols">
 						<div class="col">
 							<h3 class="green">Are these software licenses?</h3>
 							<p>