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

.lyric-image {
  --vertical-offset: 2rem;
  --border-width: 2rem;
  --background-color: #ff6666;
  --side-margin: 2rem;
  max-width: none;
  width: calc(100% + 2 * var(--side-gutter));
  margin-left: calc(-1 * var(--side-gutter));
  overflow: hidden;
  margin-bottom: var(--vertical-gutter-mobile); }
  @media only screen and (min-width: 50em) {
    .lyric-image {
      --side-margin: 4rem; } }
  @media only screen and (min-width: 90.625em) {
    .lyric-image {
      --side-margin: 10rem; } }
  @media only screen and (min-width: 50em) {
    .lyric-image {
      --vertical-offset: 4rem;
      --border-width: 3rem; } }
  @media only screen and (min-width: 90.625em) {
    .lyric-image {
      --vertical-offset: 6rem;
      --border-width: 4rem;
      margin-top: 8rem;
      margin-bottom: 11rem; } }
  .lyric-image.lyric-image--left .lyric-image__image {
    text-align: left; }
    .lyric-image.lyric-image--left .lyric-image__image img {
      border-left: 0; }
    .lyric-image.lyric-image--left .lyric-image__image:after {
      left: 23%; }
  .lyric-image.lyric-image--right {
    text-align: right; }
    .lyric-image.lyric-image--right .lyric-image__image img {
      border-right: 0; }
    .lyric-image.lyric-image--right .lyric-image__image:after {
      right: 23%; }
  .lyric-image.lyric-image--top .lyric-image__image {
    padding-bottom: var(--vertical-offset); }
    .lyric-image.lyric-image--top .lyric-image__image img {
      border-top: 0; }
    .lyric-image.lyric-image--top .lyric-image__image:after {
      top: var(--vertical-offset); }
  .lyric-image.lyric-image--bottom .lyric-image__image {
    padding-top: var(--vertical-offset); }
    .lyric-image.lyric-image--bottom .lyric-image__image img {
      border-bottom: 0; }
    .lyric-image.lyric-image--bottom .lyric-image__image:after {
      bottom: var(--vertical-offset); }
  .lyric-image__image {
    position: relative;
    display: block; }
    .lyric-image__image img {
      width: 90%;
      position: relative;
      z-index: 2;
      border: var(--border-width) solid #fff; }
      @media only screen and (min-width: 50em) {
        .lyric-image__image img {
          width: 61%; } }
    .lyric-image__image:after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: var(--background-color);
      position: absolute;
      z-index: 1; }