Done

assets/styles/components/card.scss

@@ -0,0 +1,86 @@
+.card {
+  &__media {
+    display: inline-block;
+    overflow: hidden;
+    border-radius: 8px;
+    height: 350px;
+    background: linear-gradient(360deg, rgb(0, 0, 0) 100%, #ffffff 100%);
+
+    &-image {
+      @extend .main-content-image;
+      width: 380px;
+      cursor: initial;
+      height: 350px;
+      object-fit: cover;
+      border-radius: 10px;
+      position: relative;
+      cursor: initial;
+      opacity: 0.5;
+    }
+  }
+  &__body {
+    position: relative;
+  }
+
+  &__body-location {
+    position: absolute;
+    bottom: 45px;
+    align-items: center;
+    left: 10%;
+    color: $color-base-white;
+
+    &::before {
+      content: url(../icons/map-pin.svg);
+      margin-right: 0.5em;
+    }
+  }
+  &__body-label {
+    position: absolute;
+    bottom: 120px;
+    align-items: center;
+    left: 10%;
+    color: white;
+  }
+  &__body-title {
+    position: absolute;
+    bottom: 80px;
+    left: 10%;
+    color: $color-base-white;
+  }
+}
+.card__media .card__media-image {
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  vertical-align: middle;
+}
+.card__media .card__media-image:hover {
+  -webkit-transform: scale(1.03); /* Safari and Chrome */
+  -moz-transform: scale(1.03); /* Firefox */
+  -ms-transform: scale(1.03); /* IE 9 */
+  -o-transform: scale(1.03); /* Opera */
+  transform: scale(1.03);
+  border-radius: 15px;
+}
+
+.card:nth-child(1) .card__body-label {
+  background-color: $color-secondary-400;
+  padding: 7px 10px;
+  color: $color-secondary-700;
+  font-weight: 700;
+  border-radius: 4px;
+}
+.card:nth-child(2) .card__body-label {
+  background-color: $color-primary-100;
+  padding: 7px 10px;
+  color: $color-primary-700;
+  border-radius: 4px;
+}
+.card:nth-child(3) .card__body-label {
+  background-color: $color-neutrals-100;
+  padding: 7px 10px;
+  color: $color-neutrals-700;
+  border-radius: 4px;
+}

assets/styles/components/cta.scss

@@ -0,0 +1,43 @@
+.cta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1440px;
+  max-width: 80%;
+
+  &__title {
+    color: $color-neutrals-900;
+    font-size: $sizes-md-desktop;
+    font-weight: 700;
+  }
+  &__subtitle {
+    margin: 1em 0;
+    color: $color-neutrals-900;
+    line-height: 1.4;
+    font-size: $sizes-sm-desktop;
+  }
+  &__button {
+    display: inline-block;
+    margin-bottom: 5.5em;
+
+    padding: 10px 35px 10px 20px;
+    text-align: center;
+
+    background: none;
+    border: 1px solid grey;
+    cursor: pointer;
+    border-radius: 8px;
+    color: $color-neutrals-700;
+    &::after {
+      content: url(../icons/arrow-left.svg);
+      margin-left: 0.3em;
+      margin-top: 0.1em;
+      position: absolute;
+      color: $color-neutrals-800;
+    }
+    &:hover {
+      color: $color-base-black;
+      border: 1px solid $color-base-black;
+    }
+  }
+}

assets/styles/components/listing.scss

@@ -0,0 +1,13 @@
+.listing__inner {
+  @extend .main-content-ol;
+  @extend .main-content-link;
+
+  max-width: $breakpoints-desktop;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  width: 1440px;
+  gap: 1em;
+  max-width: 80%;
+  margin: auto;
+}

assets/styles/global.scss

@@ -9,7 +9,7 @@ html {
 }
 
 body {
-  font-family: 'Plus Jakarta Sans', sans-serif;
+  font-family: "Plus Jakarta Sans", sans-serif;
   font-size: 16px;
 
   background-color: slot(page, background);
@@ -40,8 +40,8 @@ body {
   width: 100%;
   margin: 0 auto;
 
-  @include responsive-slot('padding-top', page, spacing);
-  @include responsive-slot('padding-bottom', page, spacing);
+  @include responsive-slot("padding-top", page, spacing);
+  @include responsive-slot("padding-bottom", page, spacing);
 
   overflow: hidden;
 }
@@ -50,11 +50,15 @@ body {
   width: 100%;
   margin: 0 auto;
 
-  @include responsive-slot('margin-top', component, spacing);
-  @include responsive-slot('margin-bottom', component, spacing);
+  @include responsive-slot("margin-top", component, spacing);
+  @include responsive-slot("margin-bottom", component, spacing);
 
-  &:first-child { margin-top: 0; }
-  &:last-child { margin-bottom: 0; }
+  &:first-child {
+    margin-top: 0;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .main-content-ol {

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";