article.guide {
  position: relative;

  p,
  li {
    strong {
      font-weight: 500;
      color: var(--frontHex);
    }
  }

  > figure:first-child {
    margin-top: 0;
  }

  figure {
    &.-background {
      padding: $spacing-unit/3*2;
      background-color: #f4f4f4;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    &.-shadow {
      img {
        filter: drop-shadow(0px 5px 10px rgba(#000000, 0.1)) drop-shadow(0px 10px 20px rgba(#000000, 0.1));
        border-radius: 10px;
      }
    }
  }

  a.button {
    display: inline-block;
    padding: 0 $spacing-unit/3*2;
    border-radius: 3px;
    color: white;
    line-height: 43px;
    text-decoration: none;
    background-color: var(--link-base-color);
    transition: all 150ms $ease;

    &:hover {
      background-color: var(--link-hover-color);
    }

    &.-outline {
      background-color: transparent;
      color: var(--link-base-color);
      border: 1px solid var(--link-base-color);

      &:hover {
        color: var(--link-hover-color);
        border-color: var(--link-hover-color);
      }
    }
  }

  a.video-link,
  a.prototype-link {
    margin-top: $spacing-unit;
    display: block;
    position: relative;

    > svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 62px;
      height: 62px;
      transition: all $ease 250ms;
    }

    span {
      display: flex;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: all $ease 250ms;
      background-color: rgba(black, 0.2);
      border: 2px solid white;
      border-radius: 100px;
      color: white;
      font-size: 18px;
      padding: 5px 10px;
      box-shadow: 0 5px 15px -3px rgba(black, 0.25);

      > svg {
        width: $spacing-unit;
        height: $spacing-unit;
        margin-right: 3px;
      }
    }

    &.prototype-link {
      display: block;
    }
  }

  .small-video-link {
    margin-top: $spacing-unit;

    a {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .small-video-link__image {
      flex-shrink: 0;
      display: block;
      position: relative;

      img {
        width: 100%;
        height: auto;
      }

      > svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 45px;
        height: 45px;
        transition: all $ease 100ms;
      }
    }

    .small-video-link__caption {
      transition: all $ease 100ms;
      color: #606060;
      line-height: 1.2;

      p {
        margin: 0;
      }
    }

    &:hover {
      .small-video-link__caption {
        color: var(--primary-color);
      }

      .small-video-link__image {
        svg {
          transform: translate(-50%, -50%) scale(1.2, 1.2);
        }
      }
    }

    @include media-query(small) {
      .small-video-link__image {
        flex-basis: 180px;
        flex-shrink: 1;
      }
    }

    @include media-query(medium-up) {
      .small-video-link__image {
        flex-basis: 180px;
      }
    }
  }

  .small-video-link-gallery {
    display: flex;
    flex-wrap: wrap;
    margin-top: $spacing-unit;
    // flex-direction: column;

    .small-video-link {
      margin-top: 0;
      flex-basis: 35%;
      flex-grow: 1;
      max-width: calc(50% - 15px);
    }

    @include media-query(small) {
      gap: $spacing-unit / 2;

      .small-video-link {
        a {
          align-items: stretch;
          flex-direction: column;
          gap: 10px;
        }
      }

      .small-video-link__image {
        flex-basis: 0;
      }

      .small-video-link__caption {
        text-align: center;
      }
    }

    @include media-query(medium-up) {
      gap: $spacing-unit;
    }
  }

  h2, h3, h4, h5, h6 {
    a.header-anchor {
      font-size: 0.65em;
      vertical-align: text-top;
      color: #CCCCCC;

      &:hover {
        text-decoration: none;
      }
    }

    @include media-query(large) {
      a.header-anchor {
        opacity: 0;
        transition: all 100ms $ease;

        &:hover {
          color: var(--primary-color);
        }
      }

      &:hover {
        a.header-anchor {
          opacity: 1;
        }
      }
    }
  }

  span {
    &.-blue {
        color: $blue;
    }

    &.-green {
        color: $green;
    }
  }

  > iframe {
    display: block;
  }

  @include media-query(medium-down) {
    padding-left: $spacing-unit/2;
    padding-right: $spacing-unit/2;
  }

  @include media-query(large) {
    padding-left: $spacing-unit;
    padding-right: $spacing-unit;
  }

  & > .center {
    @include clearfix;

    &.flex {
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      justify-content: flex-start;
      //align-items: flex-start;
    }

    @include media-query(medium-down) {
      > figure {
        &:not(:first-child),
        &.-float-left,
        &.-float-right,
        &.-float-left-mobile,
        &.-float-right-mobile {
          margin-top: $spacing-unit/5;
        }
      }
    }

    @include media-query(medium-up) {
      &.flex {
        flex-direction: row;

        & > .-float-left {
          img {
            width: 100%;
          }

          & + * {
            flex-shrink: 2;
          }
        }
      }
    }

    @include media-query(large) {
      > figure {
        margin-top: 0;
      }
    }
  }

  & > .-float-left,
  & > .center .-float-left {
    float: left;
    margin-right: $spacing-unit/2;
    max-width: 50%;
  }

  & > .-float-right,
  & > .center .-float-right {
    float: right;
    margin-left: $spacing-unit/2;
    max-width: 50%;
  }

  @include media-query(medium-up) {
    & > .-float-left-desktop,
    & > .center .-float-left-desktop {
      float: left;
      margin-right: $spacing-unit/2;
      max-width: 50%;
    }

    & > .-float-right-desktop,
    & > .center .-float-right-desktop {
      float: right;
      margin-left: $spacing-unit/2;
      max-width: 50%;
    }
  }

  & > .-float-right,
  & > .center .-float-right {
    @include media-query(large) {
      margin-top: 0;
      margin-bottom: 0;
      float: right;
      margin-left: $spacing-unit;
    }
  }

  // Full width images stretch all the way, up to 1600px width.

  & > .-full-width {
    display: flex;
    flex-direction: column;
    align-items: center;

    .lottie {
      width: 100%;
    }

    @include media-query(medium-down) {
      margin-left: -$spacing-unit/2;
      margin-right: -$spacing-unit/2;
    }

    @include media-query(large) {
      margin-left: - $spacing-unit;
      margin-right: - $spacing-unit;
    }
  }

  figure.-full-width {
    figcaption {
      margin-left: $spacing-unit/2;
      margin-right: $spacing-unit/2;
    }
  }

  // Width images can stretch beyond the regular content, but maintain padding left and right.

  & > .-wide {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  & > iframe.-full-width {
    @include media-query(medium-down) {
      margin-left: 0;
      margin-right: 0;
    }

    @include media-query(large) {
      margin-left: 0;
      margin-right: 0;
    }
  }

  & > *:not(.-full-width, .-wide) {
    @include media-query(medium-down) {

    }

    @include media-query(large) {
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  & > .-center {
    text-align: center;
  }

  // Other

  li {
      margin-left: 18px;
  }

  .figma-embed {
    overflow: hidden;
    position: relative;

    iframe {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      box-sizing: border-box;
      transform-origin: left top;
      border: 0px solid rgba(black, 0.5);
    }
  }

  figure:not(.-float-left, .-float-right, :first-child),
  iframe {
    @include media-query(medium-down) {
      margin-top: $spacing-unit;
      margin-bottom: $spacing-unit;
    }

    @include media-query(large) {
      margin-top: $spacing-unit;
      margin-bottom: $spacing-unit;
    }
  }
}
