@media screen and (min-width: 48rem) {
  .call-out-box--has-image .call-out-box__content {
    height: 100%;
  }
}

/* Pink */
.call-out-box--pink {
  --call-out-box-bg-color: var(--wc-pink);
}

/* White */
.call-out-box--white {
  --call-out-box-bg-color: var(--color-white);
}

/* Light */
.call-out-box--light {
  --call-out-box-bg-color: var(--wc-light);
}

/* Blue */
.call-out-box--blue {
  --call-out-box-bg-color: var(--wc-bg-blue);
}

/* Blue dark */
.call-out-box--blue-dark {
  --call-out-box-bg-color: var(--wc-bg-blue-dark);
}

/* Purple light */
.call-out-box--purple-light {
  --call-out-box-bg-color: var(--wc-purple-light);
}

/* Grey */
.call-out-box--grey {
  --call-out-box-bg-color: var(--wc-grey);
}

/* Orange */
.call-out-box--orange {
  --call-out-box-bg-color: var(--wc-bg-orange);
}

/* Green */
.call-out-box--green {
  --call-out-box-bg-color: var(--wc-green);
}

/* Default call out button appearance */
.call-out-box__link {
  border-radius: .25rem;
  text-decoration: none;
}

.call-out-box__link:hover {
  color: var(--call-out-box-link-color);
  background-color: unset;
  text-decoration: underline;
}

/* Lighter colours have darker button */
.call-out-box--pink,
.call-out-box--white,
.call-out-box--light,
.call-out-box--blue,
.call-out-box--blue-dark,
.call-out-box--purple-light,
.call-out-box--grey,
.call-out-box--orange {
  --call-out-box-text-color: var(--wc-dark);
  --call-out-box-title-color: var(--wc-dark);
}

.call-out-box--pink .call-out-box__link:hover,
.call-out-box--white .call-out-box__link:hover,
.call-out-box--light .call-out-box__link:hover,
.call-out-box--blue .call-out-box__link:hover,
.call-out-box--blue-dark .call-out-box__link:hover,
.call-out-box--purple-light .call-out-box__link:hover,
.call-out-box--grey .call-out-box__link:hover,
.call-out-box--orange .call-out-box__link:hover {
  --call-out-box-link-color: var(--wc-dark);
}