@import url("./ress.css");
@import url("./base.css");
@import url("./header.css");
@import url("./footer.css");
@import url("./heading.css");
@import url("./hero.css");

@media screen and (min-width: 768px) {
  .Page {
    display: grid;
    grid-template-columns: 0 minmax(0, 1fr) 30rem;
    gap: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .Page {
    display: grid;
    grid-template-columns: 30rem minmax(0, 1fr) 30rem;
    gap: 2rem;
  }
}


.Container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  max-width: 44rem;
  width: 100%;
  background-color: var(--white);
  padding: 0 0 2rem;
}
@media screen and (min-width: 500px) {
  .Container {
    border: 2px solid var(--black);
    border-radius: 2rem;
    padding: 1rem 2.4rem 2rem;
  }
}

.Main {
  display: grid;
  place-items: center;
  gap: 12rem;
  padding: 6rem 1.8rem 16rem;
}
@media screen and (min-width: 500px) {
  .Main {
    padding: 6rem 0 16rem;
  }
}

.Section {
  display: grid;
  gap: 3rem;
  width: calc(100% - 12rem);
  scroll-margin-block-start: 12rem;
  font-size: 1.6rem;
}

.Catch {
  font-size: 2rem;
}

.Flow__List {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4rem;
  font-size: 1.6rem;
}
.Flow__List div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.Flow__List dt {
  font-size: 1.8rem;
}
.Flow__List dd {
}

.Word {
  display: inline-block;
}