<div class="cta">
    <h3 class="cta__heading">Join our mailing list</h3>
    <div class="cta__body">
      <p>Be the first to hear about our new offerings</p>
      <button class="cta__button" type="button">Sign up</button>
    </div>
</div>

<div class="cta th-blue">
    <h3 class="cta__heading">Join our mailing list</h3>
    <div class="cta__body">
      <p>Be the first to hear about our new offerings</p>
      <button class="cta__button" type="button">Sign up</button>
    </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");


:root {
	--primary: #742a2a;
	--secondary: #e53e3e;
}

body {
	margin: 0;
	font-family: "Open Sans", sans-serif;
	padding: 1rem;
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

h3,
p {
	margin: 0;
}

button {
	display: inline-blocks;
	border: none;
	padding: 0.75rem 2rem;
	color: inherit;
	font-size: inherit;
	border-radius: 0.5rem;
}

.cta {
	background-color: var(--primary);
	color: white;
	margin: 1rem;
	border-radius: 0.25rem;
	overflow: hidden;
}

.cta__heading {
	background-color: var(--secondary);
	color: var(--primary);
	padding: 0.75rem 1rem;
}

.cta__body {
	padding: 1rem;
}

.cta__button {
	margin-top: 1rem;
  background-color: var(--secondary);
}

.th-blue {
	--primary: #2a4365;
	--secondary: #3182ce;
}