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

/* Type */
.lyric-hero {
  --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-hero {
      --side-margin: 4rem; } }
  @media only screen and (min-width: 90.625em) {
    .lyric-hero {
      --side-margin: 10rem; } }
  @media only screen and (min-width: 50em) {
    .lyric-hero {
      --side-margin: 4rem; } }
  @media only screen and (min-width: 90.625em) {
    .lyric-hero {
      --side-margin: 10rem; } }
  @media only screen and (min-width: 50em) {
    .lyric-hero {
      margin-bottom: 9.3rem; } }
  .lyric-hero__title {
    --side-gutter: 2rem;
    padding-left: var(--side-gutter);
    padding-right: var(--side-gutter);
    position: relative;
    z-index: 100;
    margin: 0; }
    @media only screen and (min-width: 50em) {
      .lyric-hero__title {
        --side-gutter: 4rem; } }
    @media only screen and (min-width: 90.625em) {
      .lyric-hero__title {
        --side-gutter: 10rem; } }
  .lyric-hero__image {
    position: relative;
    z-index: 90;
    display: flex;
    justify-content: flex-end;
    margin-top: -2rem;
    min-height: 35rem; }
    @media only screen and (min-width: 50em) {
      .lyric-hero__image {
        margin-top: -3rem;
        margin-left: var(--side-margin);
        width: calc(100% - var(--side-margin)); } }
    .lyric-hero__image img {
      display: block;
      object-fit: cover;
      object-position: left center;
      width: 100%; }
      @media only screen and (min-width: 50em) {
        .lyric-hero__image img {
          margin-left: 6rem;
          width: calc(100% - 6rem); } }
  .lyric-hero__links {
    position: absolute;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: stretch; }
    @media only screen and (min-width: 50em) {
      .lyric-hero__links {
        left: 0; } }
  .lyric-hero__link {
    font-family: "Raleway", sans-serif;
    font-size: 1.5em;
    font-weight: 800;
    margin: 0 0 1em;
    text-transform: uppercase;
    letter-spacing: .2em;
    line-height: 1.25;
    position: relative;
    display: inline-block;
    color: #000;
    text-decoration: none;
    transition: all 150ms;
    margin-bottom: 2.2rem; }
    .lyric-hero__link:hover, .lyric-hero__link:focus {
      color: #fff; }
      .lyric-hero__link:hover span, .lyric-hero__link:focus span {
        background-color: rgba(255, 255, 255, 0); }
    .lyric-hero__link span {
      display: block;
      position: relative;
      z-index: 2;
      margin: .2rem;
      padding: 1em 1.4em;
      background: #fff; }
    .lyric-hero__link:after {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      background: #91399F;
      background: linear-gradient(90deg, #ff6666 0%, #91399F 100%); }
    .lyric-hero__link span {
      padding-right: 5.7rem; }
    .lyric-hero__link:before {
      content: "";
      position: absolute;
      right: 1.7rem;
      top: 50%;
      z-index: 3;
      display: block;
      width: 1rem;
      height: 1rem;
      transform: translateY(-50%) rotate(45deg);
      border: 0.2rem solid #000;
      border-left-width: 0;
      border-bottom-width: 0;
      transition: border-color 150ms; }
    .lyric-hero__link:hover:before, .lyric-hero__link:focus:before {
      border-color: #fff; }