.heading {
  color: var(--white-80);
  margin-bottom: 40px;
}

.heading + p {
  padding-bottom: 24px;
}

span.purpleGradient {
  background: linear-gradient(90deg, #5d34b3 0%, #a314d5 49.31%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.heroSection,
.serversSection,
.keyserverCompanySection {
  display: flex;
  padding: 120px 32px;
  justify-content: center;
}

.heroSection {
  padding-top: 64px;
}

.serversSection {
  background-color: var(--light-dark-page-background);
}

.heroContainer,
.serversContainer,
.keyserverCompanyContainer {
  display: flex;
  width: 1376px;
  max-width: 90vw;
}

.heroContainer {
  flex-direction: column;
}

.heroImage {
  width: 100%;
  max-height: 376px;
  margin-bottom: 72px;
}

.heroText {
  text-align: center;
}

.serversImage {
  width: 100%;
  max-height: 480px;
}

.serversCopy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 72px;
}

.readTheDocs {
  width: 100%;
  align-self: flex-end;
  margin-bottom: 24px;
  margin-left: 112px;
}

@media (max-width: 1440px) {
  .serversContainer,
  .keyserverCompanyContainer {
    flex-direction: column;
  }

  .serversCopy {
    padding-left: 0;
    margin-top: 64px;
  }

  .keyserverCompanyCopy {
    margin-bottom: 48px;
  }

  .readTheDocs {
    max-width: 504px;
    align-self: flex-start;
    margin: 0;
  }
}