.archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro archive" "notify archive";
  column-gap: 2rem;
  row-gap: 2rem;
}

.archive-intro {
  grid-area: intro;
}

.archive-list {
  grid-area: archive;
}

.archive-notify {
  grid-area: notify;
  align-self: end;
  max-width: 55ch;
}

@media (max-width: 767.98px) {
  .archive-grid {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .archive-intro {
    margin-bottom: 2rem;
  }
}

@media (max-width: 767.98px) {
  .archive-list {
    margin-bottom: 3rem;
  }
}

@media (max-width: 767.98px) {
  .archive-notify {
    max-width: none;
  }
}