main.main {
   padding: 0;
}

.workshop-navigation {
   margin-top: 2em;
   position: relative;
   padding-bottom: 1em;
}
.prev-project,
.next-project {
   position: absolute;
   border-bottom: 0;
   opacity: 0.7;
   text-shadow: none;
   max-width: calc(50% - 25px);
   line-height: 1.2;
}
.prev-project {
   left: 20px;
}
.next-project {
   right: 20px;
}
.prev-project:hover,
.next-project:hover {
   opacity: 1;
}

.workshop-main {
   grid-column: span 2;
}
.workshop-main > *,
.main > h1,
header,
.workshop-meta {
   padding-left: 20px;
   padding-right: 20px;
}

.video {
   margin: 0;
   padding-bottom: 56.25%;
   position: relative;
}
.video iframe {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}

.workshop-meta {
   grid-column: span 2;
}
.workshop-lecturer {
   margin-bottom: 32px;
}
.workshop-lecturer-name {
   display: flex;
   align-items: center;
   user-select: none;
   font-weight: bold;
}
.avatar {
   margin-right: 16px;
}
.workshop-lecturer-bio {
   margin-top: 20px;
}

.workshop-main h1 {
   font-size: 20px;
   margin-top: 2rem;
}
.workshop-main h2 {
   font-size: inherit;
   margin: 1.25rem 0 0.5rem 0;
}
.workshop-main ul {
   list-style: none;
}
.workshop-main ul ul,
.workshop-main ol ol {
   padding-left: 16px;
}
.workshop-main ul li::before {
   content: "-";
   margin-right: 8px;
}
.workshop-main ol {
   margin-left: 0;
   padding-right: 0;
   list-style-type: none;
}
.workshop-main ol li {
   counter-increment: step-counter;
}
.workshop-main ol li::before {
   content: counter(step-counter) ".";
   margin-right: 8px;
}

footer {
   margin-left: 20px;
   width: calc(100% - 40px);
}

@media screen and (min-width: 780px) {
   .main {
      padding: 0 20px;
   }
   .workshop-main {
      padding-right: 110px;
   }
   .workshop-main > *,
   .main > h1,
   header,
   .workshop-meta {
      padding-left: 0px;
      padding-right: 0px;
   }

   .workshop-navigation {
      position: static;
   }
   .prev-project,
   .next-project {
      position: absolute;
      top: 40vh;
      width: calc(7vw - 9px);
      height: 93px;
      background-image: url(/assets/images/arrow.svg);
      background-repeat: no-repeat;
      background-position: calc(7vw - 48px) center;
      opacity: 0.7;
      color: transparent;
      user-select: none;
   }
   .prev-project {
      left: 0px;
   }
   .next-project {
      right: 0px;
      transform: rotate(180deg);
   }

   footer {
      margin: 0;
      width: 100%;
   }
}

@media screen and (min-width: 1104px) {
   .prev-project,
   .next-project {
      width: calc(6.8vw - 30px);
      background-position: calc(6.8vw - 68px) center;
   }
   .workshop-meta {
      grid-column: span 1;
   }
}