.frame {
  padding: 3rem 5vw;
  text-align: center;
  position: relative;
  z-index: 1000;
}

.frame__title {
  font-size: 1rem;
  margin: 0 0 1rem;
  font-weight: normal;
}

.frame__links {
  display: inline;
}

.frame__github, .frame__links a:not(:last-child), .frame__demos a:not(:last-child) {
  margin-right: 1rem;
}

.frame__demos {
  margin: 1rem 0;
}

.frame__demo--current, .frame__demo--current:hover {
  text-decoration: underline;
  color: var(--color-link);
}

@media screen and (min-width: 53em) {
  .message {
    display: none;
  }
}

@media screen and (min-width: 53em) {
  .frame {
    text-align: left;
    z-index: 10000;
    top: 0;
    left: 0;
    display: grid;
    align-content: space-between;
    width: 100%;
    max-width: none;
    height: 100vh;
    padding: 2rem 2.25rem;
    pointer-events: none;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: auto auto auto;
    grid-template-areas: 'title title ... ' '... ... ...' 'github demos links';
  }
}

@media screen and (min-width: 53em) {
  .frame__title-wrap {
    grid-area: title;
    display: flex;
  }
}

@media screen and (min-width: 53em) {
  .frame__title {
    margin: 0;
  }
}

@media screen and (min-width: 53em) {
  .frame__github {
    grid-area: github;
    justify-self: start;
    margin: 0;
  }
}

@media screen and (min-width: 53em) {
  .frame__demos {
    margin: 0;
    grid-area: demos;
    justify-self: center;
  }
}

@media screen and (min-width: 53em) {
  .frame__links {
    grid-area: links;
    padding: 0;
    justify-self: end;
  }
}

@media screen and (min-width: 53em) {
  .frame a {
    pointer-events: auto;
  }
}

@media screen and (min-width: 53em) {
  .content {
    height: 100vh;
    justify-content: center;
  }
}