h1 {
  font-family: var(--ft-m);
  font-size: 11.1vw;
  letter-spacing: calc(var(--neg-4) * var(--fs-164-50));
  line-height: var(--lh-100);

  +p {
    margin-block-start: var(--sp-16-8);
  }
}

p + .cta {
  margin-block-start: var(--sp-40-20);
}

@keyframes scale-up {
  to {
    width: 100%;
  }
}

@supports (animation-timeline: scroll()) {
  .hero {
    img {
      animation: scale-up linear both;
      animation-timeline: scroll();
      animation-range: 0% 5%;
    }
  }
}

.hero {
  container: hero / inline-size;
  text-align: center;

  inner-wrapper {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas:
      ". title ."
      ". instruction .";
    padding-block-end: 0;

    hgroup {
      grid-area: title;
    }

    .instruction {
      grid-area: instruction;
      margin-block-start: var(--sp-240-80);
      display: block;
    }

    @container (inline-size < 56.25rem) {
      padding-block-end: 0;
    }

    @container (inline-size < 31.25rem) {
      hgroup p {
        text-align: left;
      }
    }
  }

  img {
    width: 63.7%;
    margin-block-start: var(--sp-20);
    margin-inline: auto;

    @container (inline-size < 90rem) {
      animation-range: 0% 8%;
    }

    @container (inline-size < 56.25rem) {
      animation: none;
      width: 100%;
    }
  }
}

.about {
  container: about / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
      "subtitle subtitle subtitle"
      "h2-dec description img";
    row-gap: var(--sp-120-40);

    >p {
      grid-area: subtitle;

      span {
        display: block;
      }
    }

    h2-dec {
      grid-area: h2-dec;
      display: block;
    }

    des-wrapper {
      grid-area: description;
      width: 67%;
      margin-inline: auto;
    }

    >img {
      grid-area: img;
      margin-inline-start: auto;
    }

    @container (inline-size < 56.25rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "subtitle"
        "h2-dec"
        "description"
        "img";
      row-gap: 0;

      h2-dec {
        display: flex;
        flex-direction: column-reverse;

        img {
          margin-block: var(--sp-40);
        }
      }

      des-wrapper {
        width: 100%;
      }

      >picture img {
        margin-inline: auto;
        margin-block-start: var(--sp-40);
      }
    }
  }
}
.project {
  container: project / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 3fr;
    grid-template-areas:
      "content . picture";
    
    project-content {
      grid-area: content;
      display: flex;
      flex-direction: column;
      
      li {
        grid-template-columns: auto 1fr;

        a {
          display: grid;
          grid-template-columns: 1fr auto;
          text-decoration: none;
          color: inherit;
        }
      }
    }

    >picture {
      grid-area: picture;
    }

    .cta {
      margin-block-start: auto;
    }

    @container (inline-size < 56.25rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "content"
        "picture";

      >picture {
        margin-block-start: var(--sp-40);
      }

      .cta {
        margin-block-start: var(--sp-20);
      }
    }
  }
}
.process {
  container: process / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 3fr 1fr 2fr;
    grid-template-areas:
      "content content content"
      "img2 . img3";
    row-gap: var(--sp-120-40);
    
    process-content {
      grid-area: content;
      display: grid;
      grid-template-columns: 3fr 5fr 4fr;
      grid-template-areas: "header footer main";

      header {
        grid-area: header;

        li {
          grid-template-columns: auto 1fr;;
        }
      }

      main-content {
        grid-area: main;

        p+p {
          margin-block-start: var(--sp-20);
        }
      }

      footer {
        grid-area: footer;
        width: 60%;
        margin-inline: auto;

        @container (inline-size < 75rem) {
          width: 80%;
        }
      }
    }

    >picture:nth-of-type(1) {
      grid-area: img2;
    }

    >picture:nth-of-type(2) {
      grid-area: img3;
    }

    @container (inline-size < 61.25rem) {
      process-content {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "header main"
          "footer main";
        gap: var(--sp-40);

        footer {
          width: 100%;
        }
      }
    }

    @container (inline-size < 46.875rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "content"
        "img2"
        "img3";
      row-gap: var(--sp-40);
      
      process-content {
        grid-template-columns: 1fr;
        grid-template-areas:
          "header"
          "footer"
          "main";
        
        footer {
          margin-block: var(--sp-40);
        }
      }
    }
  }
}
.hear-from-our-client {
  container: hear / inline-size;

  inner-wrapper {
    display: grid;
    grid-template-columns: 5fr 2fr 5fr;
    grid-template-areas:
      "h2 h2 h2"
      "content . img";
    
    h2 {
      grid-area: h2;
    }
    
    hear-content {
      grid-area: content;

      p {
        margin-block-start: var(--sp-80-40);

        q {
          display: block;
          margin-block-end: var(--sp-20);
        }
        
        span {
          display: block;
          color: var(--black);
        }
      }
    }

    >picture {
      grid-area: img;
    }

    @container (inline-size < 56.25rem) {
      grid-template-columns: 1fr;
      grid-template-areas:
        "h2"
        "content"
        "img";
      hear-content {
        p {
          margin-block-end: var(--sp-80-40);
        }
      }
    }
  }
}