* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
}

:root {
  --White: hsl(0, 0%, 100%);

  --Stone-100: hsl(30, 54%, 90%);
  --Stone-150: hsl(30, 18%, 87%);
  --Stone-600: hsl(30, 10%, 34%);
  --Stone-900: hsl(24, 5%, 18%);

  --Brown-800: hsl(14, 45%, 36%);

  --Rose-800: hsl(332, 51%, 32%);
  --Rose-50: hsl(330, 100%, 98%);
}

body {
  min-height: 100vh;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--Stone-100);
}

main {
  max-width: 500px;
  background-color: var(--White);
  border-radius: 1rem;
  box-shadow: 0px 0px 10px hsl(30, 18%, 87%);
  margin: 4rem 0;
}

.section-one {
  width: 100%;
}

.section-one figure {
  width: 100%;
  padding: 1.75rem;
}
.section-one figure img {
  width: 100%;
  border-radius: 1rem;
}

.section-one > div {
  padding: 0rem 1.75rem;
}

.section-one > div h1 {
  font-family: "Young Serif", serif;
  color: var(--Stone-900);
  margin-bottom: 0.75rem;
  font-size: 2rem;
  font-weight: 500;
}

.section-one > div > p {
  color: var(--Stone-600);
  margin-bottom: 1.5rem;
}

.section-one > div div {
  background-color: var(--Rose-50);
  border-radius: 0.5rem;
  padding: 1.5rem 2rem 1rem;
}

.section-one > div div > p {
  color: var(--Rose-800);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.section-one div ul {
  margin-left: 1.5rem;
}
.section-one div ul li {
  margin-bottom: 0.5rem;
  color: var(--Brown-800);
}
.section-one div ul li p {
  margin-left: 0.75rem;
  color: var(--Stone-600);
}

.section-one div ul span {
  font-weight: 600;
  color: var(--Stone-900);
}

.section-two {
  padding: 1.5rem;
}

.section-two h2 {
  font-family: "Young Serif", serif;
  font-weight: 500;
  color: var(--Brown-800);
  font-size: 2rem;
  margin-bottom: 1.25rem;
}
.section-two ul {
  margin-left: 0.75rem;
  padding: 0 1rem;
}
.section-two ul li {
  color: var(--Brown-800);
  margin-bottom: 0.75rem;
}
.section-two ul li p {
  color: var(--Stone-600);
  margin-left: 0.75rem;
}

.section-three {
  padding: 0 1.5rem;
}

.section-three div {
  padding: 2rem 0 1.5rem;
  border-top: 1px solid var(--Stone-600);
  border-bottom: 1px solid var(--Stone-600);
}
.section-three h2 {
  font-family: "Young Serif", serif;
  font-weight: 500;
  color: var(--Brown-800);
  font-size: 2rem;
  margin-bottom: 1.25rem;
}
.section-three ol {
  margin-left: 0.75rem;
  padding: 0 1rem;
}
.section-three ol li {
  color: var(--Brown-800);
  font-weight: bolder;
  margin-bottom: 0.75rem;
}

.section-three ol li p {
  font-weight: 400;
  color: var(--Stone-600);
  line-height: 1.25;
  margin-left: 0.75rem;
  text-align: justify;
}

.section-three ol li span {
  color: var(--Stone-900);
  font-weight: bold;
}

.section-four {
  padding: 1.5rem 2rem 2rem;
}
.section-four h2 {
  font-family: "Young Serif", serif;
  font-weight: 500;
  color: var(--Brown-800);
  font-size: 2rem;
  margin-bottom: 1.25rem;
}
.section-four > p {
  color: var(--Stone-600);
  line-height: 1.25;
  text-align: justify;
  margin-bottom: 1rem;
}

.section-four > div > div {
  display: flex;
  border-bottom: 1px solid var(--Stone-600);
  padding: 0.75rem;
  margin-left: 1rem;
}
.section-four > div > div p {
  flex: 1;
  color: var(--Stone-600);
}
.section-four > div > div .unit {
  color: var(--Brown-800);
  font-weight: bolder;
}
#last {
  border: none;
  padding-bottom: 0;
}

@media (max-width: 450px) {
  main {
    border-radius: 0;
    margin: 0;
  }

  .section-one figure {
    padding: 0 0 2rem 0;
  }
  .section-one figure img {
    border-radius: 0;
  }

  .section-one > div h1 {
    font-size: 1.5rem;
  }
}