.gibson-process {
  background-color: var(--color-light-grey);
  background-image: url("../../images/noise@2x.png");
  background-size: 100px 100px;
  position: relative;
  z-index: 9;
  padding: 180px 22px 88px; }
  @media only screen and (min-width: 48em) {
    .gibson-process {
      padding: 180px 44px 88px; } }
  @media only screen and (min-width: 62em) {
    .gibson-process {
      padding: 180px 66px 88px; } }
  .gibson-process h1 {
    line-height: 1; }

.gibson-process-text {
  max-width: 620px;
  padding-bottom: 22px;
  padding-left: 5px; }

.gibson-process-steps {
  max-width: 1024px;
  margin: 0 auto; }
  .gibson-process-steps .gibson-process-step {
    display: flex;
    align-items: center;
    padding: 0 0 22px;
    flex-direction: column; }
    @media only screen and (min-width: 48em) {
      .gibson-process-steps .gibson-process-step {
        flex-direction: row; } }
    .gibson-process-steps .gibson-process-step:nth-of-type(1) .image {
      margin-top: 8px; }
      @media only screen and (min-width: 48em) {
        .gibson-process-steps .gibson-process-step:nth-of-type(1) .image {
          margin-top: 0; } }
    .gibson-process-steps .gibson-process-step:nth-of-type(2) .image {
      margin-right: 100px;
      width: 360px; }
    .gibson-process-steps .gibson-process-step:nth-of-type(3) .image {
      margin-right: 44px;
      margin-top: 9px; }
      @media only screen and (min-width: 48em) {
        .gibson-process-steps .gibson-process-step:nth-of-type(3) .image {
          margin-top: 0; } }
    .gibson-process-steps .gibson-process-step:nth-of-type(4) .image {
      margin-right: 88px;
      width: 360px;
      margin-top: 8px; }
      @media only screen and (min-width: 48em) {
        .gibson-process-steps .gibson-process-step:nth-of-type(4) .image {
          margin-top: 0; } }
    .gibson-process-steps .gibson-process-step:nth-of-type(5) .image {
      margin-top: 48px; }
      @media only screen and (min-width: 48em) {
        .gibson-process-steps .gibson-process-step:nth-of-type(5) .image {
          margin-top: 0; } }
  .gibson-process-steps .step-info {
    flex-grow: 1; }
  .gibson-process-steps .step-top {
    display: flex;
    align-items: center;
    z-index: 9; }
    .gibson-process-steps .step-top .step-number {
      width: 66px;
      overflow: visible;
      font-size: 180px;
      line-height: 1;
      color: transparent;
      letter-spacing: -0.02em;
      font-weight: 700;
      -webkit-text-stroke: 3px #fff;
      white-space: nowrap; }
    .gibson-process-steps .step-top .step-title {
      line-height: 1;
      font-size: 36px;
      font-weight: 500;
      margin-top: 5px;
      transition: 0.4s ease-out; }
    .gibson-process-steps .step-top.active .step-title {
      -webkit-transform: translate(20px, 0);
              transform: translate(20px, 0); }
  .gibson-process-steps .step-content {
    position: relative;
    z-index: 9; }
    .gibson-process-steps .step-content .step-row {
      display: flex; }
    .gibson-process-steps .step-content .text {
      max-width: 450px;
      padding: 0 22px; }
  .gibson-process-steps .image {
    width: 400px;
    height: auto;
    padding: 22px; }
    .gibson-process-steps .image img {
      display: block;
      -o-object-fit: contain;
         object-fit: contain; }
/*# sourceMappingURL=gibson-process.css.map */