.facilitator-view__header {
  align-items: center;
  background-color: var(--white);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 6rem;
  justify-content: space-between;
}

.facilitator-view__header-logo {
  justify-self: center;
  width: 6rem;
}

.facilitator-view__header-link-wrapper {
  align-items: center;
  border-radius: var(--border-radius-sm);
  display: flex;
  margin-left: var(--spacing-large);
  margin-right: var(--spacing-large);
  padding: var(--spacing-small);
}

.facilitator-view__back-link {
  display: none;
}

.facilitator-view__header-link-wrapper:hover {
  background-color: var(--light-teal);
}

.facilitator-view__header-link {
  color: var(--color-base);
  font-weight: var(--font-weight-bold);
  margin-left: var(--spacing-base);
  text-decoration: none;
  width: 10ch;
}

.facilitator-view__header-link:hover {
  color: var(--dark-teal);
  cursor: pointer;
}

.facilitator-view__help-link {
  justify-self: end;
  margin-right: var(--spacing-large);
}

.facilitator-view__nav {
  align-items: center;
  background-color: var(--dark-teal);
  color: var(--white);
  display: grid;
  grid-template-areas:
    "classroom date"
    "data title";
  padding: var(--spacing-small) var(--spacing-large);
}

.facilitator-view__nav--hidden-mobile {
  display: grid;
}

.facilitator-view__hamburger-menu {
  display: none;
}

.facilitator-view__classroom-link {
  grid-area: classroom;
}

.facilitator-view__data-link {
  grid-area: data;
}

.facilitator-view__date {
  grid-area: date;
}

.facilitator-view__location {
  grid-area: title;
}

.facilitator-view__nav-link {
  color: var(--white);
  display: inline-block;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  margin: 0;
  text-decoration: none;
}

.facilitator-view__location,
.facilitator-view__date {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-normal);
  text-align: right;
}

.facilitator-view__content-wrapper {
  background-color: var(--color-base);
  color: var(--white);
  height: calc(100vh - 6rem);
  padding-bottom: var(--spacing-x-large);
  overflow-y: scroll;
  overflow-x: hidden;
}

.facilitator-view__content {
  display: flex;
}

.facilitator-view__current-slide-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 2;
}

.facilitator-view__slide-nav-container {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: var(--spacing-base);
  width: calc(100% - (var(--spacing-base) * 2));
}

.facilitator-view__previous-and-next-slide-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--spacing-x-large) * 1.5);
  padding: var(--spacing-base);
}

.facilitator-view__instructions {
  max-width: 40rem;
}

@media (max-width: 500px) {
  .facilitator-view__header-link-wrapper {
    display: none;
  }

  .facilitator-view__header {
    /* align-items: center;
    display: grid; */
    grid-template-columns: 2fr 3fr 1fr;
    height: 5rem;
    /* justify-content: space-between; */
  }

  .facilitator-view__header-logo {
    width: 5rem;
  }

  .facilitator-view__hamburger-menu {
    cursor: pointer;
    display: block;
    justify-self: end;
  }

  .facilitator-view__help-link {
    justify-self: end;
    margin-right: 0;
  }

  .facilitator-view__back-link {
    display: block;
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    width: 100%;
  }

  .facilitator-view__nav {
    justify-content: center;
    background-color: var(--white);
    grid-template-areas:
      "date"
      "title"
      "classroom" 
      "data"
      "back";
    text-align: center;
  }

  .facilitator-view__nav--hidden-mobile {
    display: none;
  }

  .facilitator-view__nav-link,
  .facilitator-view__back-link {
    margin: var(--spacing-small) 0;
  }

  .facilitator-view__nav,
  .facilitator-view__nav a {
    color: var(--dark-teal);
  }

  .facilitator-view__location,
  .facilitator-view__date {
    margin: 0 0 var(--spacing-small);
    text-align: center;
  }

  .facilitator-view__content-wrapper {
    height: calc(100vh - 5rem);
  }

  .facilitator-view__previous-and-next-slide-wrapper {
    display: none;
  }
  
  .facilitator-view__slide-nav-container,
  .facilitator-view__instructions {
    padding-left: var(--spacing-base);
    padding-right: var(--spacing-base);
  }

  .facilitator-view__current-slide-wrapper > h2,
  .facilitator-view__instructions h2 {
    font-size: var(--font-size-body);
    padding-top: var(--spacing-base);
  }
}