.aim-section {
  padding: 200px var(--sec-page-gutter) 0 var(--sec-page-gutter)
}

.aim-heading {
  width: 68vw;
}

.aim-circle-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.aim-circle {
  align-self: center;
}

.aims {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50vw;
}

.aim {
  width: 50vw;
}

.aim-separator {
  width: 50vw;
  margin-bottom: 25px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.aim-separator-circle {
  width: 6px;
  height: 6px;
  background-color: var(--color-text-main);
  border-radius: 50%;
}

.aim-separator-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-text-main);
}

.aim-number {
  font-size: 76px;
  color: var(--color-text-alternative);
  margin-bottom: 18px;
}

.aim-paragraph {
  width: 33vw;
  font-size: 22px;
  line-height: 1.0909;
  margin-bottom: 75px;
}


@media only screen and (max-width: 1024px) {
  .aim-heading {
    width: 75vw;
  }
}

@media only screen and (max-width: 769px) {
  .aim-section {
    padding: 140px var(--sec-page-gutter) 0 var(--sec-page-gutter)
  }
}

@media only screen and (max-width: 769px) {

  .aim-heading {
    width: 80vw;
  }
}

@media only screen and (max-width: 769px) {
  .aim-circle-wrapper {
    margin-top: 0;
  }
}

@media only screen and (max-width: 769px) {

  .aim-circle {
    width: 100%;
    max-width: 560px;
    height: auto;
  }
}

@media only screen and (max-width: 769px) {

  .aim-paragraph {
    width: calc(50vw - var(--sec-page-gutter));
    margin-bottom: 45px;
  }
}

@media only screen and (max-width: 480px) {
  .aim-section {
    padding: 100px var(--sec-page-gutter) 0 var(--sec-page-gutter);
  }
}

@media only screen and (max-width: 480px) {

  .aim-section {
      padding: 120px var(--sec-page-gutter) 100px var(--sec-page-gutter);
  }
}

@media only screen and (max-width: 480px) {

  .aim-circle-wrapper {
      margin-top: -60px;
  }
}

@media only screen and (max-width: 480px) {

  .aim-heading {
      font-size: 36px;
      line-height: 1.1667;
  }
}

@media only screen and (max-width: 480px) {
  .aim-heading {
    width: calc(100vw - 2 * var(--sec-page-gutter));
  }
}

@media only screen and (max-width: 480px) {
  .aim-circle {
    width: 90vw;
    max-width: none;
  }
}

@media only screen and (max-width: 480px) {
  .aim-paragraph {
    width: calc(50vw - var(--sec-page-gutter));
    margin-bottom: 35px;
  }
}

/* Keep the decorative circle independent from the growing text flow. */
.aim-circle-wrapper .aim-circle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(743px, 100%);
  height: auto;
}

.aim-circle-wrapper .aims {
  position: relative;
  top: auto;
  left: auto;
  margin-left: 50%;
  padding-top: min(371.5px, 50%);
  width: 50%;
}

.aim-circle-wrapper .aim,
.aim-circle-wrapper .aim-separator { width: 100%; }
.aim-circle-wrapper .aim-paragraph { max-width: 100%; }