/* Project Styles */

html {
  background-color: #fff;
  color: #000;
}

a {
  color: #000;
  opacity: 1;
  transition-property: opacity;
}

a:hover,
a:focus {
  opacity: 0.5;
}

.project-the-wip {
  background-color: honeydew;
}

.project-the-penrhosian {
  background-color: #cfe3f1;
}

.project-elc-tour-event {
  background-color: #f2dfe1;
}

.project-learn-strong {
  background-color: #e1e6dc;
}

.project-science-innovation-centre {
  background-color: #e4dec7;
}

.project-student-handbook-illustrations {
  background-color: #f7f1f9;
}

.project-penrhos-community-newsletter {
  background-color: #e3e9e7;
}

.project-saga {
  background-color: #d2d8e5;
}

.project-penrhos-videos {
  background-color: #d2dbd8;
}

.project-penrhos-signage {
  background-color: #fbf1b6;
}

header a {
  color: #000;
}

.project-details {
  margin-top: 60px;
}

.project-details h1 {
  font-size: 2em;
  font-weight: 500;
  line-height: 1;
}

.project-description {
  margin-bottom: 40px;
}

.project-description p {
  font-size: 1em;
}

.project-images figure {
  margin-top: 30px;
}

.project-images figure:first-child {
  margin-top: 0;
}

footer {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

footer a {
  color: #000;
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.5625;
  text-decoration: none;
}

footer a:hover,
footer a:focus {
  text-decoration: underline;
}

@media screen and (min-width: 600px) {

  .project-details {
    margin-top: 120px;
  }

  .project-description {
    margin-bottom: 40px;
  }

  .project-images figure {
    margin-top: 40px;
  }
}

@supports (display: grid) {

  @media screen and (min-width: 768px) {

    .project-details {
      margin-top: 180px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 40px;
      grid-row-gap: 40px;
    }

    .project-description {
      grid-column: 1/3;
      margin-bottom: 0;
    }

    .project-description h1 {
      margin-bottom: 40px;
      font-size: 3em;
      line-height: 0.83;
    }

    .project-images {
      grid-column: span 3;

      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 20px;
      grid-row-gap: 40px;
    }

    .project-images figure {
      margin-top: 0;
      grid-column: span 2;
    }

    /* Project-level overrides */

    /* The Penrhosian */
    .project-the-penrhosian figure:nth-child(2) {
      grid-column: 1/3;
    }

    .project-the-penrhosian figure:nth-child(4) {
      grid-column: span 4;
    }

    /* ELC Tour Event */
    .project-elc-tour-event figure:nth-child(1) {
      grid-column: 1/2;
    }

    .project-elc-tour-event figure:nth-child(2) {
      grid-column: 2/5;
    }

    .project-elc-tour-event figure:nth-child(3) {
      grid-column: 1/5;
    }

    /* Learn Strong */
    .project-learn-strong figure:nth-child(1),
    .project-learn-strong figure:nth-child(2) {
      grid-column: 1/5;
    }

    /* Science Innovation Centre */
    .project-science-innovation-centre figure:nth-child(1) {
      grid-column: 1/5;
    }

    .project-science-innovation-centre figure:nth-child(2) {
      grid-column: 1/2;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .project-science-innovation-centre figure:nth-child(3) {
      grid-column: 2/5;
      grid-row: 2/3;
    }

    .project-science-innovation-centre figure:nth-child(6) {
      grid-column: 1/4;
    }

    .project-science-innovation-centre figure:nth-child(7) {
      grid-column: 4/5;
    }

    .project-science-innovation-centre figure:nth-child(8) {
      grid-column: 1/5;
    }

    /* Penrhos Signage */
    .project-penrhos-signage figure:nth-child(1) {
      grid-column: 1/5;
    }

    .project-penrhos-signage figure:nth-child(2) {
      grid-column: 1/4;
    }

    .project-penrhos-signage figure:nth-child(3) {
      grid-column: 4/5;
    }

    /* The WIP */

    .project-the-wip figure:nth-child(1) {
      grid-column: 1/2;
    }

    .project-the-wip figure:nth-child(2) {
      grid-column: 2/5;
    }

    .project-the-wip figure:nth-child(3),
    .project-the-wip figure:nth-child(4),
    .project-the-wip figure:nth-child(5),
    .project-the-wip figure:nth-child(6) {
      grid-column: span 1;
    }

    .project-the-wip figure:nth-child(7) {
      grid-column: 1/4;
    }

    .project-the-wip figure:nth-child(8) {
      grid-column: 4/5;
    }

  }

  @media screen and (min-width: 1024px) {

    .project-details {
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 40px;
      grid-row-gap: 40px;
    }

    .project-description {
      grid-column: 1/3;
    }

    .project-images {
      grid-column: span 4;
      grid-column-gap: 40px;
    }
  }

  @media screen and (min-width: 1280px) {

    .project-details {
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: 60px;
    }

    .project-details h1 {
      font-size: 4em;
      line-height: 1;
    }

    .project-description {
      grid-column: 1/3;
    }

    .project-images {
      grid-column: 1/5;
    }
  }
}