.block.block__callout-box {
  border-radius: 10px;

  .field--type-image,
  .field--type-entity-reference,
  img {
    float: none;
    margin: 0;
  }

  .content {
    display: grid;
    align-items: center;
    row-gap: 1rem;
    padding: 1rem;

    @media (min-width: 576px) {
      padding: 1.5rem;
      column-gap: 1.5rem;
    }
  }

  .content.text-left {
    @media (min-width: 576px) {
      grid-template-columns: 4fr 2fr;
    }
  }

  .content.text-right {
    @media (min-width: 576px) {
      grid-template-columns: 2fr 4fr;
    }
  }

  .callout-box__text {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background-color: var(--color-white);
    border-radius: 10px;
  }

  .callout-box__image {
    img {
      border-radius: 15px;
    }
  }
}

.block__callout-box.purple {
  background-color: var(--csa-purple--pastel);
}

.block__callout-box.green {
  background-color: var(--csa-green--pastel);

}

.block__callout-box.teal {
  background-color: var(--csa-teal--pastel);

}

.block__callout-box.blue {
  background-color: var(--csa-blue--pastel);

}

.block__callout-box.red {
  background-color: var(--csa-red--pastel);

}

.block__callout-box.no-image {
  .content {
    gap: 0;
  }
  .content.text-left {
    @media (min-width: 576px) {
      grid-template-columns: 6fr 0fr;
    }
  }

  .content.text-right {
    @media (min-width: 576px) {
      grid-template-columns: 0fr 6fr;
    }
  }
}