:root {
  --font-size-adjustment: 1;
  --vertical-gutter-mobile: 4rem; }

/* Type */
.lyric-twocol {
  --side-margin: 2rem;
  --side-margin: 2rem;
  max-width: none;
  width: calc(100% + 2 * var(--side-gutter));
  margin-left: calc(-1 * var(--side-gutter));
  margin-bottom: var(--vertical-gutter-mobile); }
  @media only screen and (min-width: 50em) {
    .lyric-twocol {
      --side-margin: 4rem; } }
  @media only screen and (min-width: 90.625em) {
    .lyric-twocol {
      --side-margin: 10rem; } }
  @media only screen and (min-width: 50em) {
    .lyric-twocol {
      --side-margin: 4rem; } }
  @media only screen and (min-width: 90.625em) {
    .lyric-twocol {
      --side-margin: 10rem; } }
  .lyric-twocol__top {
    position: relative;
    z-index: 100;
    margin-bottom: var(--vertical-gutter-mobile); }
    @media only screen and (min-width: 50em) {
      .lyric-twocol__top {
        display: flex;
        padding: 0 6rem 0 6rem;
        margin-bottom: 0; } }
  .lyric-twocol__bottom {
    position: relative;
    z-index: 90; }
    @media only screen and (min-width: 50em) {
      .lyric-twocol__bottom {
        display: grid;
        grid-template-columns: 50% 50%;
        margin-top: -16rem; } }
  .lyric-twocol .arrow-button {
    margin-top: 1em; }
    @media only screen and (min-width: 50em) {
      .lyric-twocol .arrow-button {
        margin-top: 1.75em; } }
  .lyric-twocol__text {
    --side-gutter: 2rem;
    padding-left: var(--side-gutter);
    padding-right: var(--side-gutter);
    position: relative;
    z-index: 100;
    margin: 0;
    margin-bottom: var(--vertical-gutter-mobile); }
    @media only screen and (min-width: 50em) {
      .lyric-twocol__text {
        --side-gutter: 4rem; } }
    @media only screen and (min-width: 90.625em) {
      .lyric-twocol__text {
        --side-gutter: 10rem; } }
    @media only screen and (min-width: 50em) {
      .lyric-twocol__text {
        width: 60%;
        padding-right: 2rem;
        margin: 0; } }
  @media only screen and (min-width: 50em) {
    .lyric-twocol--fancy .lyric-twocol__text {
      width: 50%; } }
  .lyric-twocol__image {
    max-width: 50%;
    margin: 0 auto;
    display: none; }
    @media only screen and (min-width: 50em) {
      .lyric-twocol__image {
        display: block;
        width: 40%;
        margin: 0;
        max-width: none; } }
  .lyric-twocol__image-3 img {
    display: none; }
    @media only screen and (min-width: 50em) {
      .lyric-twocol__image-3 img {
        display: block;
        width: 100%; } }
  .lyric-twocol__image-2 {
    text-align: right;
    --vertical-offset: 2rem;
    --border-width: 2rem;
    --background-color: #ff8c00;
    overflow: visible;
    position: relative;
    display: block;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto; }
    @media only screen and (min-width: 50em) {
      .lyric-twocol__image-2 {
        --vertical-offset: 24%;
        --border-width: 3rem;
        width: 82%;
        max-width: none;
        margin: 0 0 0 auto; } }
    @media only screen and (min-width: 90.625em) {
      .lyric-twocol__image-2 {
        --border-width: 2rem; } }
    .lyric-twocol__image-2 img {
      width: 100%;
      position: relative;
      z-index: 2;
      border: var(--border-width) solid #fff;
      border-bottom: 0;
      border-right: 0; }
    .lyric-twocol__image-2:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: var(--background-color);
      position: absolute;
      z-index: 1;
      bottom: var(--vertical-offset);
      right: 4%; }
      @media only screen and (min-width: 50em) {
        .lyric-twocol__image-2:after {
          width: 110%;
          height: 96%; } }