@import url('./vars.css');

.callout-grid {
  display: grid;
}
.callout {
  border: none;
  margin: 1rem;
  color: var(--dark-grey);
  border-radius: .75rem;
}
.callout-yellow {
  background-color: var(--guiding-yellow);
}
.callout-lavender {
  background-color: var(--leading-lavender);
}
.callout-sage {
  background-color: var(--listening-sage);
}
.callout-taupe {
  background-color: var(--transformative-taupe);
}
.callout-wrapper {
  display: flex;
  flex-direction: column;
}
.callout-headline {
  font-weight: 800;
  font-size: 1.75rem;
}
.callout-icon {
  font-size: 2.625rem;
}
.callout-yellow .callout-text a {
  color: var(--royal-blue);
  text-decoration: underline;
}
.callout-yellow .callout-text a:hover {
  color: var(--um-blue);
}

.callout.thank-you {
  margin: 3rem 0;
  padding: 2rem;
  text-align: center;
}

@media screen and (min-width: 48em) {
  .callout-grid {
    grid-template-columns: 1fr 1fr;
  }
}