.content-container {
  display: flex;
  flex-direction: column;

  gap: 2rem;

  & h2 {
    color: var(--clr-highlight-contrast)
  }

  & h3 {
    color: var(--clr-highlight-gradient)
  }

  @media screen and (min-width: 1024px) {
    flex-direction: row;
    margin: 0 8%;
  }

  @media screen and (min-width: 1920px) {
    margin: 0 12%;
  }

  @media screen and (min-width: 2560px) {
    margin: 0 18%;
  }
}

.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 25vh;
  overflow: hidden;

  & img {
    filter: saturate(0) opacity(15%);
  }

  & h1.header {
    position: absolute;

    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
    color: var(--clr-highlight);
  }
}

.content {
  line-height: normal;

  & a {
    color: var(--clr-highlight-gradient);
    text-decoration: underline;
  }
}

.sidebar {
  & a {
    color: var(--clr-highlight-gradient);
    text-decoration: underline;
  }

  & ul {
    list-style: none;
    padding: 0;

    & li {
      padding-bottom: 10px;
    }
  }

}