.home {
  .sticky-cta {
    margin: -1.6rem -1.6rem 0 -1.6rem;
  }
}

.about-cloud {
  margin: 4rem auto;
  max-width: 900px;
}

.your-project {
  margin-top: 3rem;
  padding: 3rem;
  background-color: $color-gray-lightest;

  h2 {
    margin-top: 0;
  }

  hr {
    border: 0;
    border-bottom: 1px solid $color-gray-light;
    margin-top: $gap * 4;
    margin-bottom: $gap * 4;
  }

  .links {
    justify-content: flex-start;

    .icon-link {
      padding: $gap ($gap * 4);

      &:first-child {
        padding-left: 0;
      }

      &:last-child {
        padding-right: 0;
      }

      &:hover {
        background-color: transparent;
        color: $color-gray-dark;

        .svg * {
          fill: $color-gray-dark;
        }
      }

      &.active:hover {
        color: $color-blue;
      }
    }
  }
}

.home-layout {
  display: block;
  background-color: $color-white;

  .home-container {
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8rem;
    padding-right: $gap * 4;
    padding-left: $gap * 4;

    @include media($medium-screen) {
      display: flex;
    }

    h1 {
      font-weight: 200;
    }

    h2,
    h3,
    h4 {
      color: $color-primary;
    }

    &__logo {
      margin: $gap * 2;

      img {
        width: 20rem;

        @include media($medium-screen) {
          width: 25rem;
        }
      }
    }

    &__body {
      padding-left: $gap * 2;
    }

    &__list {
      ol {
        list-style: none;
        counter-reset: home-counter;
        padding-left: 0;

        li {
          counter-increment: home-counter;
          position: relative;

          &::before {
            content: counter(home-counter) ". ";
            color: $color-primary;
            font-weight: bold;
            position: absolute;
            left: -2rem;
          }
        }
      }
    }
  }
}