@import '@/sass/style.scss';

.NextRoomLink {
  background-color: $very-dark-green;
  color: $soft-red;
  display: block;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 20px 16px 16px;
  width: 100%;

  .title,
  .cta,
  .room {
    font-size: 16px;
    font-weight: 500;
  }

  .cta,
  .room {
    color: $dark-grayish-green;
    text-transform: lowercase;
  }

  .title {
    color: $very-soft-green;
    grid-column: 1 / 6;
  }

  .icon,
  .room {
    text-align: right;
  }

  .cta {
    grid-column: 1 / 4;
    grid-row: 2 / 2;
  }

  .icon {
    grid-column: 6 / 7;

    svg {
      display: inline-block;
      fill: $very-soft-green;
      height: 12px;
      width: auto;
    }
  }

  .room {
    grid-column: 4 / 7;
    grid-row: 2 / 2;
  }
}
