/*** colors ***/
/*** breakpoints (top-end) ***/
.ryan-sequence {
  display: grid;
  grid-template-areas: "ryan";
  width: 100%;
  height: auto;
  margin: 100px auto;
}
.ryan-sequence .frame {
  grid-area: ryan;
  width: 100%;
  height: auto;
}

.intro {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 40px auto 100px;
}
.intro .intro-text {
  width: 92%;
  max-width: 700px;
}

.about {
  display: grid;
  margin: 80px auto 120px;
  width: 100%;
  grid-template-areas: "ryan" "text";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  max-width: 2000px;
  row-gap: 80px;
  overflow-x: hidden;
}
.about #creepy-ryan {
  grid-area: ryan;
  width: 85%;
  overflow-x: hidden;
  justify-self: end;
}
.about .about-text {
  grid-area: text;
  width: 92%;
  max-width: 700px;
  justify-self: center;
}

.work {
  width: 92%;
  max-width: 1200px;
  margin: 40px auto 140px;
  text-align: center;
}
.work .workHeader {
  margin-bottom: 60px;
}

/*** mobile ***/
@media (max-width: 768px) {
  .about #creepy-ryan {
    width: 185%;
    transform: translate3d(8%, 0, 0);
  }
}