.c-callout-card {
  max-width: var(--si-width-xlarge);
}
.section__container .c-callout-card {
  max-width: 100%;
}
.c-callout-card a:hover,
.c-callout-card a:focus {
  color: inherit;
}

.c-callout-card.c-callout-card--primary .c-callout-card__inner-wrap {
  background-color: var(--si-color-off-white);
}

.c-callout-card.c-callout-card--black {
  color: var(--si-color-off-white);
}
.c-callout-card.c-callout-card--black .c-callout-card__inner-wrap {
  background-color: var(--si-color-black);
}
.c-callout-card.c-callout-card--black a,
.c-callout-card.c-callout-card--black h2,
.c-callout-card.c-callout-card--black h3,
.c-callout-card.c-callout-card--black h4,
.c-callout-card.c-callout-card--black h5,
.c-callout-card.c-callout-card--black h6,
.c-callout-card.c-callout-card--black li,
.c-callout-card.c-callout-card--black strong,
.c-callout-card.c-callout-card--black p {
  color: var(--si-color-off-white);
}
.c-callout-card.c-callout-card--black .icon {
  background-color: var(--si-color-off-white);
}
.c-callout-card.c-callout-card--black a:hover,
.c-callout-card.c-callout-card--black a:focus {
  color: var(--si-color-off-white);
}
.c-callout-card.c-callout-card--black a:hover .icon,
.c-callout-card.c-callout-card--black a:focus .icon {
  background-color: var(--si-color-off-white);
}
.c-callout-card.c-callout-card--black a.button {
  color: var(--si-color-black);
}
.c-callout-card.c-callout-card--black a.button .icon {
  background-color: var(--si-color-black);
}
.c-callout-card.c-callout-card--black a.button:hover .icon, .c-callout-card.c-callout-card--black a.button:focus .icon {
  background-color: var(--si-color-black);
}

.c-callout-card.c-callout-card--yellow .c-callout-card__inner-wrap {
  background-color: var(--si-color-yellow);
}
.c-callout-card.c-callout-card--yellow a:hover .icon,
.c-callout-card.c-callout-card--yellow a:focus .icon {
  background-color: var(--si-color-black);
}

.c-callout-card.c-callout-card--blue .c-callout-card__inner-wrap {
  background-color: var(--si-color-bright-blue);
}

.c-callout-card__wrap {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 768px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__wrap,
  .c-callout-card.c-callout-card--narrow .c-callout-card__wrap {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .c-callout-card.c-callout-card--wide.c-callout-card--left .c-callout-card__wrap,
  .c-callout-card.c-callout-card--narrow.c-callout-card--left .c-callout-card__wrap {
    flex-direction: row-reverse;
  }
}

.c-callout-card.c-callout-card--sidebar {
  display: flex;
  flex-direction: column;
}
.c-callout-card.c-callout-card--sidebar .c-callout-card__title {
  font-size: 1.125rem;
  line-height: 1.625rem;
}
@media (min-width: 1024px) {
  .c-callout-card.c-callout-card--sidebar .c-callout-card__title {
    font-size: 1.5rem;
    line-height: 2.125rem;
  }
}

.c-callout-card__wrap figure {
  align-self: initial;
  flex: none;
  width: 100%;
  order: 1;
  overflow: hidden;
}

@media (min-width: 768px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__wrap figure,
  .c-callout-card.c-callout-card--narrow .c-callout-card__wrap figure {
    order: 2;
    height: auto;
    max-width: var(--si-width-6xsmall);
    position: relative;
  }
}
@media (min-width: 992px) {
  .section__container--narrow .c-callout-card.c-callout-card--wide .c-callout-card__wrap figure,
  .section__container--narrow .c-callout-card.c-callout-card--narrow .c-callout-card__wrap figure {
    max-width: var(--si-width-6xsmall);
  }
}
@media (min-width: 1440px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__wrap figure,
  .c-callout-card.c-callout-card--narrow .c-callout-card__wrap figure {
    max-width: var(--si-width-4xsmall);
  }
}

.c-callout-card__wrap figure img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .c-callout-card.c-callout-card--narrow .c-callout-card__wrap figure {
    max-width: 18rem;
  }
}

.c-callout-card.c-callout-card--wide .c-callout-card__wrap figure img,
.c-callout-card.c-callout-card--narrow .c-callout-card__wrap figure img {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__wrap figure img,
  .c-callout-card.c-callout-card--narrow .c-callout-card__wrap figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.c-callout-card .c-callout-card__inner-wrap {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.5rem;
  order: 2;
}

@media (min-width: 768px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__inner-wrap,
  .c-callout-card.c-callout-card--narrow .c-callout-card__inner-wrap {
    order: 1;
    flex: 1;
    padding: 2.5rem;
    gap: 1.25rem;
  }
}

@media (min-width: 1440px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__inner-wrap {
    padding: 4.5rem;
    gap: 1.75rem;
  }
}

.c-callout-card__title {
  font-size: 1.125rem;
  line-height: 1.625rem;
  font-weight: var(--si-fw-semibold);
}

@media (min-width: 768px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__title,
  .c-callout-card.c-callout-card--narrow .c-callout-card__title {
    font-size: 1.375rem;
    line-height: 2.125rem;
  }
}

@media (min-width: 1440px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__title {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

.c-callout-card__text,
.c-callout-card__text p {
  font-size: 1rem;
  line-height: 1.375rem;
}

@media (min-width: 768px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__text,
  .c-callout-card.c-callout-card--wide .c-callout-card__text p,
  .c-callout-card.c-callout-card--narrow .c-callout-card__text,
  .c-callout-card.c-callout-card--narrow .c-callout-card__text p {
    font-size: 1.125rem;
    line-height: 1.625rem;
  }
}

@media (min-width: 1440px) {
  .c-callout-card.c-callout-card--wide .c-callout-card__text,
  .c-callout-card.c-callout-card--wide .c-callout-card__text p {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }
}

.c-callout-card p.c-callout-card__link {
  margin: 0;
}