.staff-member {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  margin-bottom: 4rem;
}
.staff-member:first-of-type {
  margin-top: 4rem;
}

#dramatis-wrap h3 {
  color: rgb(201, 40, 45);
  margin-top: 2rem;
  font-size: 2.25rem;
}
#dramatis-wrap ul {
  padding-left: 1rem;
  margin: 0 1.5rem 2rem 0;
}
#dramatis-wrap .dramatis-headline {
  grid-area: 1/1/1/span 3;
  align-self: end;
}
#dramatis-wrap .about {
  grid-area: 2/1/2/span 3;
  background: #2d2d2d url(pattern-geo-black.5319e72e.png) 0 0/50%;
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  border-radius: 10px 10px 5px 5px;
}
#dramatis-wrap .about h2, #dramatis-wrap .about p {
  color: #fff;
}
#dramatis-wrap .about p:nth-of-type(2) {
  margin-right: 50%;
}
#dramatis-wrap .about a {
  color: #fff;
  padding: 0 0.2rem;
  text-decoration: underline;
}
#dramatis-wrap .about a:hover, #dramatis-wrap .about a:focus {
  background-color: rgb(201, 40, 45);
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
}
#dramatis-wrap .location .dramatis-headline {
  font-size: 3.2rem;
}
#dramatis-wrap .location h2 {
  font-size: 2.25rem;
}

.dramatis-image {
  grid-area: 1/3/span 2/3;
  align-self: start;
  justify-self: end;
  padding-right: 1rem;
}

.dramatis-likes,
.dramatis-dislikes,
.dramatis-skills {
  background-color: #efefef;
}

.dramatis-likes {
  grid-area: 3/1;
  padding-left: 1rem;
  border-bottom-left-radius: 10px;
}

.dramatis-dislikes {
  grid-area: 3/2;
}

.dramatis-skills {
  grid-area: 3/3;
  border-bottom-right-radius: 10px;
}

@media only screen and (max-width: 880px) {
  .staff-member {
    grid-template-columns: 1fr;
  }
  #dramatis-wrap .dramatis-headline {
    grid-area: 1/1;
    font-size: 3.5rem;
    text-align: center;
    align-self: normal;
  }
  #dramatis-wrap .about {
    grid-area: 3/1;
  }
  #dramatis-wrap .about h2 {
    font-size: 2rem;
    text-align: center;
  }
  #dramatis-wrap .about p:nth-of-type(2) {
    margin-right: 0;
  }
  #dramatis-wrap h3 {
    margin: 0 0 0 1rem;
    font-size: 2rem;
  }
  #dramatis-wrap ul {
    padding: 0 1rem;
    margin: 0;
  }
  .dramatis-image {
    grid-area: 2/1;
    justify-self: center;
    padding-right: 1rem;
    width: auto;
    height: 75vw;
  }
  .dramatis-likes,
.dramatis-dislikes,
.dramatis-skills {
    padding: 1rem;
  }
  .dramatis-likes {
    grid-area: 4/1;
    border-bottom-left-radius: 0;
  }
  .dramatis-dislikes {
    grid-area: 5/1;
  }
  .dramatis-skills {
    grid-area: 6/1;
    border-radius: 0 0 10px 10px;
    padding-bottom: 2rem;
  }
}

/*# sourceMappingURL=asd-dramatis-personae-public.css.map */