#hero {
  container: hero / inline-size;

  inner-wrapper {
    padding-block: var(--fs-times-8);

    who-am-I {
      padding-block-end: var(--fs);
      border-block-end: 1px solid var(--white-shade-4);

      p:nth-child(2) {
        color: var(--white-shade-40);
      }
    }

    what-I-do {
      padding-block-start: var(--fs);
      padding-block-end: var(--fs-times-7);

      p:nth-child(1) {
        color: var(--white-shade-40);
      }
    }

    img {
      aspect-ratio: 3 / 2;
      width: 100%;
    }

    h2 {
      font-size: var(--font-size-title);
      font-weight: var(--font-weight-400);
      line-height: var(--lh-p9);
      letter-spacing: var(--ls-title);
      text-transform: uppercase;
    }
  }
}

#about,
#work,
#principle,
#service,
#contact {
  container: main-section / inline-size;

  inner-wrapper {
    padding-block-start: var(--fs-times-3);

    h2 {
      padding-block-end: var(--fs);
      border-block-end: 1px solid var(--white-shade-4);
      color: var(--white-shade-40);
    }

    p {
      padding-block-end: var(--fs);

      &:nth-child(2) {
        padding-block-start: var(--fs);
      }
    }

    ul {
      padding-block-end: calc(var(--fs) - var(--fs-one-third));

      li {
        padding-block-end: var(--fs-one-third);
      }
    }

    a {
      justify-self: flex-start;
    }
  }

  @container (inline-size < 28.125rem) {
    inner-wrapper {
      padding-block-start: var(--fs-times-2);
    }
  }
}

/* grid */

#hero {
  inner-wrapper {

    who-am-i,
    what-i-do {
      grid-column: 1 / -1;

      p {
        &:first-child {
          grid-column: 1 / span 4;
        }
      }
    }

    who-am-i {
      p:nth-child(2) {
        grid-column: 5 / span 4;
      }
    }

    what-i-do {
      p:nth-child(2) {
        grid-column: 8 / span 4;
      }
    }

    img {
      grid-column: 1 / span 2;
    }

    h2 {
      grid-column: 5 / span 8;
    }
  }

  @container (inline-size < 60rem) {
    inner-wrapper {
      who-am-i {
        p:nth-child(2) {
          grid-column: 5 / span 8;
        }
      }

      what-i-do {
        p:nth-child(2) {
          grid-column: 5 / span 8;
        }
      }
    }
  }
}

#about,
#work,
#principle,
#service,
#contact {
  inner-wrapper {
    h2 {
      grid-column: 5 / span 8;
    }

    p,
    ul,
    a {
      grid-column: 8 / span 4;
    }
  }

  @container (inline-size < 60rem) {
    inner-wrapper {

      p,
      ul,
      a {
        grid-column: 5 / span 8;
      }
    }
  }

  @container (inline-size < 28.125rem) {
    inner-wrapper {

      h2,
      p,
      ul,
      a {
        grid-column: 1 / -1;
      }
    }
  }
}