/* poppins-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  src: url("../assets/fonts/poppins-v20-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../assets/fonts/poppins-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("../assets/fonts/poppins-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("../assets/fonts/poppins-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("../assets/fonts/poppins-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --primary-ff: "Poppins", sans-serif;
  --color-builder: hsl(0, 78%, 62%);
  --color-supervisor: hsl(180, 62%, 55%);
  --color-karma: hsl(34, 97%, 64%);
  --color-calculator: hsl(212, 86%, 64%);
  --color-neutral: hsl(0, 0%, 98%);
  --color-text: hsl(229, 6%, 66%);
  --color-heading: hsl(234, 12%, 34%);
}

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

body {
  font-family: var(--primary-ff);
}

.content {
  min-height: 100vh;
  background-color: var(--color-neutral);
}

.wrapper {
  --width: 71.25rem;
  max-width: var(--width);
  margin: 0 auto;
  padding: 0 1rem;
}

.wrapper--hero {
  --width: 35rem;
}

.hero {
  padding: 5rem 0 3rem 0;
  text-align: center;
}

.hero__title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.hero__title--top {
  display: block;
  font-weight: 200;
  color: var(--color-heading);
}

.hero__title--bottom {
  display: block;
  color: var(--color-heading);
  font-weight: 700;
}

.hero__description {
  line-height: 1.5;
  color: var(--color-text);
}

.features {
  padding: 3rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}

.feature {
  padding: 2rem;
  color: var(--color-neutral);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  border-top: 4px solid;
}

.feature--supervisor {
  grid-row: 1/-1;
  align-self: center;
  border-color: var(--color-supervisor);
}

.feature--builder {
  border-color: var(--color-builder);
}

.feature--karma {
  border-color: var(--color-karma);
}

.feature--calculator {
  grid-row: 1/-1;
  grid-column: 3;
  align-self: center;
  border-color: var(--color-calculator);
}

.feature__title {
  color: var(--color-heading);
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.feature__description {
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 2.5rem;
}

.feature__icon {
  align-self: flex-end;
}

@media (max-width: 52rem) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature--supervisor {
    grid-row: auto;
    align-self: auto;
  }

  .feature--calculator {
    grid-column: auto;
    align-self: auto;
    grid-row: auto;
  }
}

@media (max-width: 32rem) {
  .hero__title {
    font-size: 1.75rem;
  }

  .features {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}