Shawn's Submission

assets/styles/components/card.scss

@@ -0,0 +1,100 @@
+.card {
+	margin-bottom: 20px; // spacing
+	border-radius: 8;
+	overflow: hidden;
+	position: relative; // for absolute positioning of __body
+
+	// landscape card orientation
+	flex-grow: 0;
+	flex-shrink: 1;
+	flex-basis: 100%;
+	aspect-ratio: 2/1;
+	min-height: fit-content;
+
+	@include screen(smaller) {
+		flex-basis: 85%;
+		aspect-ratio: 2.5/1.2;
+		width: 100%;
+	}
+
+	// smaller card size
+	@include screen(tablet) {
+		aspect-ratio: 389/480;
+		flex-basis: 31%;
+	}
+	&__media {
+		text-align: center;
+		object-fit: cover;
+		transition: transform 0.2s;
+	}
+
+	&__body {
+		width: 100%;
+		background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+		padding: 48px 24px 24px 24px;
+		position: absolute;
+		bottom: 0;
+		display: flex;
+		flex-direction: column;
+
+		&-label {
+			font-size: 12px;
+			border-radius: 4px;
+			color: rgba(105, 39, 218, 1);
+			background-color: rgba(236, 233, 254, 1);
+			padding: 4px 10px;
+			width: fit-content;
+		}
+
+		&-title {
+			// smaller font size for small phones
+			font-size: 18px;
+			// larger font size for other screens
+			@include screen(smaller) {
+				font-size: 24px;
+			}
+
+			font-weight: 700;
+			line-height: 125%;
+			color: token("color", "base", "white");
+			margin: 12px 0;
+		}
+
+		&-location {
+			display: flex;
+			align-items: center;
+			font-size: 14px;
+			line-height: 17.5px;
+			font-weight: 600;
+			color: token("color", "base", "white");
+
+			// insert the pin svg behind the Location text
+			&::before {
+				content: url("/assets/icons/map-pin.svg");
+				display: inline-block;
+				width: 11.2px;
+				height: 13.6px;
+				margin-right: 7.4px;
+			}
+		}
+	}
+
+	// change Card2 & Card3's labels (color & bgColor)
+	&:nth-child(2) {
+		.card__body-label {
+			background-color: rgba(209, 233, 255, 1);
+			color: rgba(23, 92, 211, 1);
+		}
+	}
+	&:nth-child(3) {
+		.card__body-label {
+			background-color: rgba(244, 244, 244, 1);
+			color: rgba(63, 63, 70, 1);
+		}
+	}
+}
+
+// on entire card hover, transform &__media for Zooming
+.card:hover .card__media {
+	transform: scale(1.1);
+}

assets/styles/components/cta.scss

@@ -0,0 +1,98 @@
+.cta {
+	@include responsive-grid();
+
+	&__inner {
+		grid-column: slot(grid, wide);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		// align CTA with text on desktop
+		@include screen(large) {
+			align-items: start;
+		}
+		// spacing between CTA and text
+		gap: 12px; // only in mobile (due to the vertical stack)
+		flex-direction: column;
+		text-align: center;
+		margin-bottom: 40px;
+
+		@include screen(large) {
+			flex-direction: row;
+			justify-content: space-between;
+			text-align: start;
+			margin-bottom: 80px;
+		}
+	}
+
+	&__content {
+		width: 80%;
+
+		@include screen(medium) {
+			width: fit-content;
+		}
+		@include screen(large) {
+			width: 40%;
+		}
+
+		&-heading {
+			@include typography("heading lg");
+		}
+
+		&-paragraph {
+			@include typography("text lg");
+			@include screen(large) {
+				margin-top: 24px;
+			}
+			margin-top: 0;
+		}
+	}
+
+	&__btnWrapper {
+		&-btn {
+			border: 1px solid;
+			background: transparent;
+			border-color: token("color", "neutrals", "300");
+			color: token("color", "neutrals", "700");
+
+			padding: 12px 24px;
+			border-radius: 8px;
+			font-weight: 600;
+			transition: all 0.15s;
+
+			display: flex;
+			align-items: center;
+
+			width: fit-content;
+			height: fit-content;
+
+			@include typography("label md");
+		}
+
+		// on hover styling
+		&-btn:hover {
+			cursor: pointer;
+			border-color: token("color", "neutrals", "400");
+			color: token("color", "neutrals", "900");
+		}
+
+		// on active/press styling
+		&-btn:active {
+			border-color: token("color", "neutrals", "500*");
+			color: token("color", "neutrals", "900");
+		}
+
+		// no need for :focus styling;
+		// clashes with :active when button is clicked
+
+		// on disabled
+		&-btn:disabled {
+			border-color: token("color", "neutrals", "300");
+			color: token("color", "neutrals", "400");
+		}
+
+		//insert the icon
+		&-icon {
+			margin-left: 14px;
+		}
+	}
+}

assets/styles/components/info-box.scss

@@ -1,24 +1,24 @@
 .info-box {
-  @include responsive-grid();
+	@include responsive-grid();
 
-  &__inner {
-    grid-column: slot(grid, wide);
-  }
+	&__inner {
+		grid-column: slot(grid, wide);
+	}
 
-  &__content {
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-    width: 100%;
-    max-width: 66ch;
+	&__content {
+		display: flex;
+		flex-flow: column nowrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		width: 100%;
+		max-width: 66ch;
 
-    &-intro {
-      @include typography('text xl');
-      margin-bottom: 1.5em;
-    }
-    &-paragraph {
-      @include typography('text md');
-    }
-  }
+		&-intro {
+			@include typography("text xl");
+			margin-bottom: 1.5em;
+		}
+		&-paragraph {
+			@include typography("text md");
+		}
+	}
 }

assets/styles/components/listing.scss

@@ -0,0 +1,25 @@
+.listing {
+	@include responsive-grid();
+	a {
+		text-decoration: none;
+	}
+	&__inner {
+		grid-column: slot(grid, wide);
+		display: flex;
+
+		// Cards in column when screen size is small
+		flex-flow: row;
+		justify-content: space-evenly;
+		align-items: center;
+
+		// Cards in Row when screen size is > large
+		@include screen(large) {
+			flex-flow: row wrap;
+			justify-content: space-between;
+		}
+
+		flex-grow: 1;
+		flex-wrap: wrap;
+		width: 100%;
+	}
+}

assets/styles/index.scss

@@ -6,4 +6,8 @@
 
 @import "components/info-box.scss";
 
+@import "components/listing.scss";
 
+@import "components/card.scss";
+
+@import "components/cta.scss";

assets/styles/mono/config.scss

@@ -2,33 +2,40 @@
 @import "slots";
 
 $configs: (
-  typography: (
-    // Define base font size
-    // This is used for px to rem calculations
-    baseFontSize: 16,
+	typography: (
+		// Define base font size
+		// This is used for px to rem calculations
+		baseFontSize: 16,
 
-    // Define font fallbacks
-    // Key: quoted string, should match fontFamily name as defined in tokens.scss
-    // Value: quoted string of valid css font-family
-    fontFallbacks:
-      (
-        "Plus Jakarta Sans": "sans-serif"
-      ),
+		// Define font fallbacks
+		// Key: quoted string, should match fontFamily name as defined in tokens.scss
+		// Value: quoted string of valid css font-family
+		fontFallbacks:
+			(
+				"Plus Jakarta Sans": "sans-serif",
+			),
 
-    // Fluid typography config
-    // Used to apply fluid typography to font styles
-    fluid:
-      (
-        // Default range
-        // 'heading xl':
-        //   (
-        //     start: default,
-        //     end: desktop,
-        //   )
-      ),
-  ),
-  breakpoints: (
-    "default": 0rem,
-    // "custom": 123rem,
-  ),
+		// Fluid typography config
+		// Used to apply fluid typography to font styles
+		fluid:
+			(
+				// Default range
+				// 'heading xl':
+				//   (
+				//     start: default,
+				//     end: desktop,
+				//   )
+			),
+	),
+	breakpoints: (
+		"default": 0rem,
+		//425px
+		"smaller": 26rem,
+		//728px
+		"tablet": 45.5rem,
+		//1024px
+		"medium": 64rem,
+		//1250px
+		"large": 78.125rem,
+	),
 );