.pageContainer {
  --map-desktop-width: 23.75rem;
  display: grid;
  grid-template-areas:
    "header"
    "sidebar"
    "mainContent";
  width: 100%;
  gap: var(--Spacing-x4);
  max-width: var(--max-width);
}

.header {
  grid-area: header;
}

.mainContent {
  grid-area: mainContent;
  display: grid;
  gap: var(--Spacing-x6);
  padding-bottom: var(--Spacing-x7);
  max-width: var(--max-width-page);
  width: 100%;
  margin: 0 auto;
}

.sidebar {
  grid-area: sidebar;
  width: 100%;
  height: 100%;
  background-color: var(--Base-Surface-Subtle-Normal);
}

.experienceList {
  list-style: none;
  display: flex;
  gap: var(--Spacing-x1);
  flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .pageContainer {
    margin: 0 auto;
    gap: var(--Spacing-x4);
  }
}

@media screen and (min-width: 1367px) {
  .pageContainer {
    grid-template-areas:
      "header sidebar"
      "mainContent sidebar";
    grid-template-columns: 1fr var(--map-desktop-width);
  }

  .header {
    padding-left: var(--max-width-single-spacing);
  }

  .mainContent {
    gap: var(--Spacing-x9);
    padding-left: var(--max-width-single-spacing);
  }
}
