Mão na massa 1: Estilizando a home, o header e os cards.

_reset.scss

@use 'variables';

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: variables.$font-family-primary;
    background-color: variables.$secondary-color;
    color: variables.$primary-color;
    line-height: 1.6;

    a {
        color: variables.$primary-color;
        text-decoration: none;
        transition: color variables.$transition-duration ease-in-out;

        &:hover {
            color: variables.$accent-color;
        }
    }

_variables.scss

$primary-color: #212529;
$secondary-color: #fff;
$accent-color: #8A5E36;
$font-family-primary: 'Barlow', sans-serif;
$font-size-base: 1rem;
$padding-regular: 1rem;
$margin-bottom-regular: 1rem;
$border-radius: 0.5rem;
$transition-duration: 0.3s;
$scale-factor: 1.1;
$modal-bg: #fff;
$modal-shadow: rgba(0, 0, 0, 0.3);
$modal-max-width: 37.5rem;
$modal-padding: 1em;
$modal-border-color: #DEE2E6;
$close-button-size: 1.5em;
$heading-color: #FEFFCF;
$subheading-color: #462E09;
$nav-link-color: #7B7574;
$form-border-color: #CED4DA;
$dark-primary-color: #212529;
$dark-secondary-color: #fff;
$dark-accent-color: #B29463;
$dark-modal-bg: #212529;
$dark-modal-border-color: #DEE2E6;

_cards.scss

@use '../base/variables';

.card {
    border: 1px solid variables.$dark-accent-color;
    border-radius: variables.$border-radius;
    cursor: pointer;
    box-sizing: border-box;
    flex: 1 1 calc(33% - 1rem);
    margin: 1rem 0;
    display: flex;
    flex-direction: column;

_header.scss

@use "../base/variables";
.navbar {
  background-color: variables.$secondary-color;
  padding: variables.$padding-regular;
  position: relative;
  .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

_home.scss

@use '../base/variables';
.banner {
  padding: 2rem;
  background-size: cover;
  background-position: center;
  color: variables.$secondary-color;
  display: flex;
  align-items: start;
  flex-direction: column;
  justify-content: center;
  &.banner-1 {
    background-image: url('../../assets/banner-1.png');
    .banner-content-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
    &.banner-2 {
    background-image: url('../../assets/banner-2.png');
    min-height: 25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;