/*
 * Call to Action
 */
.c-calltoaction {
  position: relative;
  display: grid;
  grid-template-columns: minmax(80px, 100px) 50px auto;
  grid-gap: 1em;
  align-items: center;
  justify-content: center;
  margin: 5em 0;
  background: linear-gradient(to left, var(--color-primary-base), var(--color-primary-light));
  color: #fff; }
  .c-calltoaction img {
    z-index: 1; }
  .c-calltoaction > div {
    padding: 3em 0; }
  .c-calltoaction p {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: .8;
    margin: 0 0 0.5em; }
  .c-calltoaction svg {
    width: 100%;
    fill: var(--color-secondary-base); }
  .c-calltoaction a,
  .c-calltoaction a:hover,
  .c-calltoaction a:focus {
    color: inherit; }
  @media all and (max-width: 500px) {
    .c-calltoaction {
      grid-template-columns: 100px auto;
      grid-gap: 1em; }
      .c-calltoaction svg {
        display: none; } }
  @media all and (min-width: 680px) {
    .c-calltoaction {
      grid-template-columns: minmax(220px, 290px) 100px auto;
      grid-gap: 2em; }
      .c-calltoaction img {
        margin: -5em 0;
        transform: translateX(-10%); } }
  .c-calltoaction--no-margin {
    margin: 0; }
  .c-calltoaction--right {
    grid-template-columns: 50px auto minmax(80px, 100px); }
    .c-calltoaction--right svg {
      order: 1; }
    .c-calltoaction--right > div {
      order: 2; }
    .c-calltoaction--right img {
      order: 3; }
    @media all and (max-width: 500px) {
      .c-calltoaction--right {
        grid-template-columns: auto 100px; } }
    @media all and (min-width: 680px) {
      .c-calltoaction--right {
        grid-template-columns: 100px auto minmax(220px, 290px);
        grid-gap: 2em; }
        .c-calltoaction--right img {
          transform: translateX(25%); } }
  .c-calltoaction--fill {
    padding: 4vw 0; }
    .c-calltoaction--fill img {
      margin: 0; }
  .c-calltoaction--gray {
    color: var(--color-primary-base);
    background: #ddd; }
  .c-calltoaction--secondary {
    background: linear-gradient(to left, var(--color-secondary-base), var(--color-secondary-light)); }
    .c-calltoaction--secondary svg {
      fill: var(--color-primary-base); }