.main {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-content {
  max-width: 1280px;
  width: 100%;
  gap: 60px;

  & > * {
    overflow: auto;
    max-height: calc(100vh - 80px);
    scrollbar-color: #ccc transparent;
    padding: 20px 0 40px 0;

    &::-webkit-scrollbar {
      background-color: var(--bkg);
    }

    &::webkit-scrollbar-track {
      background-color: var(--bkg);
    }
    
    &::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 6px;
      color: #ccc;
      border: 1px solid red;
    }

  }

  @media screen and (min-width: 1024px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  & h1 {
    font-size: 1.875rem;
    
    @media screen and (min-width: 1024px) {
      font-size: 2.25rem;
    }
  }
}