/* Project-Page */
.project-wrapper {
  background: var(--bg-dark);
  padding-bottom: var(--space-l);
  padding-top: var(--nav-height);
}
.project-container {
  color: var(--bg-bright);
  padding-top: var(--space-m);
}
.project-container a {
  color: var(--bg-bright);
}
.project-container img {
  border-radius: var(--border-radius);
}
/* Mobile Page */
.project-mobile {
  padding-bottom: var(--space-2xl);
}
.project-desktop {
  display: none;
}
.project-wrapper h6,
.project-wrapper h5 {
  color: var(--bright-light);
}
.item-heading {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  margin-bottom: var(--space-xs);
}
.project-mobile .item:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  margin-bottom: var(--space-s);
}
.project-mobile .item:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 4 / 5;
}
.project-mobile .item:nth-child(4) {
  grid-column: 1 / -1;
  grid-row: 3 / 4;
}
.project-mobile .item:nth-child(5) {
  grid-column: 1 / -1;
  grid-row: 5 / 6;
}
.project-mobile .item .info {
  margin-bottom: var(--space-s);
}
.project-mobile .photo-item {
  background-color: var(--bg-dark-img);
  grid-column: 1 / -1;
}
.project-mobile .photo-item .img {
  margin: var(--space-m);
}
.project-mobile .sub {
  color: var(--bright-light);
  font-size: var(--font-size--1);
}
/* BREAKPOINTS */
@media only screen and (max-height: 700px) {
  .project-row .left {
    width: 35%;
    padding-bottom: var(--space-xl);
  }
}
@media only screen and (min-width: 800px) {
  /* Project-Desktop */
  .project-mobile {
    display: none !important;
  }
  .project-desktop {
    display: grid;
  }
  .project-row {
    display: flex;
  }
  .project-row .left {
    width: 35%;
  }
  .project-row .left:not(:first-child) {
    padding-top: var(--space-3xl);
  }
  .drawer:not(:last-child) {
    margin-bottom: 1rem;
  }
  .drawer_title {
    display: flex;
    text-decoration: none;
    justify-content: space-between;
    padding-bottom: var(--space-s);
  }
  .drawer_content p {
    margin: 0.5rem;
  }
  .project-row .right {
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .project-desktop .right .project-img {
    border-radius: var(--border-radius);
    background: var(--bg-dark-img);
    color: var(--bright-light);
    font-size: var(--font-size--1);
    padding: var(--space-xl) var(--space-3xl);
    margin-bottom: var(--space-xl);
  }
}