html {
  overflow-x: hidden;
  font-size: .9rem;
  @include media-breakpoint-up(md) {
    font-size: 1rem;
  }
  @include media-breakpoint-up(lg) {
    font-size: 1.125rem;
  }

}


.video-embed-item {
  width: 100% !important;
  height: auto !important;
}


.image-embed-item {
  width: 100%;
  height: auto;
}


.row > header {
  @include make-col-ready();
}


.frame + .frame {
  > header {
    h1, h2, h3, h4, h5, h6 {
      margin-top: 3em;
    }
  }
}


.linklove {

  .amadeus {
    transition: color 10s;
  }

  &:hover, &:focus {
    text-decoration: none;

    .amadeus {
      color: #f59c00;
      transition: color .125s ease-in;
    }
  }
}


#p4 .hero {
  height: inherit
}


ol {
  counter-reset: item;

  li {
    display: block;

    &:before {
      content: counters(item, ".") " ";
      counter-increment: item
    }
  }

}


.hero {
  .popper {
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
    height: 200px;
    transform: translateX(-50%) translateY(0);
    transition: $transition-base;

    color: #fff;

    display: block;
    > small:first-child {
      display: inline-block;
      margin-top: 60px;

    }
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      padding: 0;
      display: block;
      background-color: $primary-dark;
      position: absolute;
      border-radius: 100%;
      z-index: -1;
    }

    &:hover, &:focus {
      transform: translateX(-50%) translateY(-4px);

      &::before {
        transform: none;
      }
    }
  }
}
