.cta {
     margin: 1em 0;
     padding: .25em 1.5em 1.5em;
     font-size: 1.1em;
}

.cta .content {
     display: inline-block;
}

.cta.orange {
     background: #fdd38d url(cta_orange.png) left top no-repeat;
}

.cta.purple {
     background: #eee9f0 url(cta_purple.png) left top no-repeat;
}

.cta.orange h2,
.cta.purple h2 {
     color: #1b3764;
}

.cta.purple .content {
     color: #000;
}

.cta .button {
     display: inline-block;
     padding: .25em 1em;
     font-size: 1.75rem;
     border: 2px solid #fff;
     text-align: center;
     text-decoration: none;
}

.cta.orange .button {
     color: #fff;
     background-color: #56276a;
}

.cta.purple .button {
     color: #56276a;
     background-color: #faa61a;
}

.cta .button:hover,
.cta .button:focus {
     color: #56276a;
     background-color: #fff;
}

@media screen and (min-width: 56.25em) {

     .cta .content {
          display: flex;
          align-items: center;
          gap: 1em;
     }
}