:root {
  --background-default: #f5f4f0;
  --backgroun-gray: #1e1e1e;
  --border-primary: #d9d9d9;

  --text-primary: #1b1b1b;
  --text-secondary: #333333;
  --text-tertiary: #696969;
  --text-headline: #e1624f;

  --accent-blue: #0c51a7;
  --accent-orange: #e95e10;
  --accent-pink: #e5245e;
  --accent-purple: #591b98;

  --font-family-default: "Open Sans", sans-serif;
  --font-family-footer: "Alice", sans-serif;

  --title-lg: 700 36px var(--font-family-default);
  --title-md: 700 32px var(--font-family-default);
  --title-sm: 700 28px var(--font-family-default);

  --title-headline: 700 16px var(--font-family-default);

  --paragraph: 400 16px var(--font-family-default);

  --subtitle: italic 400 16px var(--font-family-default);

  --footer: 400 16px/150% var(--font-family-footer);
}

body {
  background-color: var(--backgroun-gray);
}

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

.text-lg {
  font: var(--title-lg);
}

.text-md {
  font: var(--title-md);
}

.text-sm {
  font: var(--title-sm);
}

.subtitle {
  font: var(--subtitle);
  color: var(--text-secondary);
  text-align: center;
}

p {
  font: var(--paragraph);
  color: var(--text-secondary);
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

strong,
span {
  font: var(--paragraph);
  font-weight: 700;
}

main {
  margin: 0 auto;
  width: 1280px;
  padding: 88px 80px;
  background-color: var(--background-default);
  padding: 80px;
  margin-block: 80px;
}

#description {
  padding-block: 40px;
  border-bottom: 1px solid var(--border-primary);

  img {
    margin-bottom: 24px;
    width: 100%;
    height: 729px;
  }
}

.headline {
  font: var(--title-headline);
  color: var(--text-headline);
  text-transform: uppercase;
}

.content-list {
  #title-list {
    margin: 64px 0px;

    h2 {
      margin-bottom: 8px;
    }
  }
  .list {
    margin-bottom: 48px;
    img {
      width: 100%;
      height: 350px;
      border-radius: 28px;
      margin-bottom: 20px;
    }
    .historia {
      color: var(--accent-blue);
    }
  }

  .list-last {
    padding-bottom: 20px;

    .casais {
      color: var(--accent-purple);
    }
    .familias {
      color: var(--accent-pink);
    }
    .orcamento {
      color: var(--accent-orange);
    }
  }
}

.description {
  border-top: 1px solid var(--border-primary);
  padding-top: 20px;
  text-align: center;
}

footer {
  margin-top: 65px;
  text-align: center;

  p {
    font: var(--footer);

    img {
      vertical-align: middle;
    }
  }
}