.header-wrapper {
  display: grid;
  grid-template-columns: 0.4fr 1fr 0.4fr;
  grid-template-areas: 'back-link header timeline-link';
  place-items: center;
  gap: 10px;

  .back-link {
    grid-area: back-link;
    justify-self: start;
  }

  #header {
    grid-area: header;
  }

  .timeline-link {
    grid-area: timeline-link;
    justify-self: end;
  }
}

main {
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  grid-template-areas: 'fixed-column scrollable-column';
  place-items: center;
  gap: 30px;

  .fixed-column {
    grid-area: fixed-column;
  }

  .scrollable-column {
    grid-area: scrollable-column;
    border-left: solid 1px var(--orange);
    padding: 10px 0 0 10px;

    h2 {
      margin-top: 15px;
    }
  }
}

.job-card {
  padding: 20px 30px;
  border-radius: 20px;
  gap: 20px;
}

.job-logo {
  width: clamp(150px, 18vw, 250px);
}

.project-wrapper {
  flex-wrap: wrap;

  .project-item {
    box-shadow: 0 0 4px 0px var(--purple);
    color: var(--text);
    width: 30%;
  }
}

@media (max-width: 799px) {
  .header-wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      'back-link timeline-link'
      'header header';
  }

  #container {
    overflow-y: auto !important;
    height: max-content;
  }

  main {
    grid-template-columns: 1fr;
    grid-template-areas:
      'fixed-column'
      'scrollable-column';
  }

  .job-card {
    flex-wrap: wrap;
  }

  .scrollable-column {
    height: max-content;
    overflow: hidden;
  }
}