/* Homepage Styles */

.about {
  margin-top: 80px;
  margin-bottom: 80px;
}

.about p {
  max-width: 720px;
  font-size: 1.5em;
  line-height: 1.3;
}

.project {
  border-bottom: 1px solid #333;
  transition: background-color 0.2s linear;
  cursor: pointer;
}

.project:first-child {
  border-top: 1px solid #333;
}

.project a {
  display: block;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.project-title {
  margin-bottom: 0;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
}

.project .project-type,
.project .project-medium {
  display: block;
  font-size: 0.9em;
  line-height: 1.6;
  color: #999;
  transition: color 0.2s linear;
}

.project a:hover .project-type,
.project a:hover .project-medium {
  color: #fff;
}

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

  .about {
    margin-top: 120px;
    margin-bottom: 120px;
  }

  .project a {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

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

  .about {
    margin-top: 100px;
    margin-bottom: 100px;
  }

  @supports (display: grid) {

    .project a {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 40px;
    }

    .project-title {
      line-height: 1.25;
    }

    .project .project-type,
    .project .project-medium {
      line-height: 1.4;
    }
  }
}

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

  @supports (display: grid) {

    .project a {
      grid-template-columns: repeat(4, 1fr);
      transition: background-color 0.2s linear;
    }

    .project-title {
      grid-column: 1/3;
      margin-bottom: 0;
      transition-property: padding-left, color;
      transition-duration: 0.2s;
      transition-timing-function: linear;
    }

    .project .project-type,
    .project .project-medium {
      transition: color 0.2s linear;
    }

    .project .project-type {
      grid-column: 3/4;
    }

    .project .project-medium {
      grid-column: 4/5;
    }

    .project a:hover {
      background-color: #fff;
    }

    .project a:hover .project-title {
      color: #000;
      padding-left: 20px;
    }

    .project a:hover .project-type,
    .project a:hover .project-medium {
      color: #000;
    }

    .project[data-project="the-wip"] a:hover {
      background-color: honeydew;
    }

    .project[data-project="the-penrhosian"] a:hover {
      background-color: #cfe3f1;
    }

    .project[data-project="elc-tour-event"] a:hover {
      background-color: #f2dfe1;
    }

    .project[data-project="learn-strong"] a:hover {
      background-color: #e1e6dc;
    }

    .project[data-project="science-innovation-centre"] a:hover {
      background-color: #e4dec7;
    }

    .project[data-project="student-handbook-illustrations"] a:hover {
      background-color: #f7f1f9;
    }

    .project[data-project="penrhos-community-newsletter"] a:hover {
      background-color: #e3e9e7;
    }

    .project[data-project="saga"] a:hover {
      background-color: #d2d8e5;
    }

    .project[data-project="penrhos-videos"] a:hover {
      background-color: #d2dbd8  ;
    }

    .project[data-project="penrhos-signage"] a:hover {
      background-color: #fbf1b6;
    }
  }
}