.callout {
  padding: var(--space-xs) var(--space-l) var(--space-xs) var(--space-xs);
  border-radius: 1rem;
  margin-bottom: var(--space-m);
  width: 100%;
  gap: var(--gutter-x-loose);
  will-change: transform;
  background-color: var(--card-color-background);
}
.callout.no-image-padding {
  padding: var(--space-l);
}
.callout:last-child {
  margin-bottom: 0;
}
.callout .callout-img {
  max-width: 10.375rem;
  height: 10.375rem;
  aspect-ratio: 1/1;
}
.callout .callout-img img {
  border-radius: 0.25rem 0.25rem 0.25rem 1.5rem;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.callout header {
  width: 100%;
}
@media only screen and (max-width: 48rem) {
  .callout {
    gap: var(--space-m);
    border-radius: 0.5rem;
  }
  .callout .callout-img {
    width: 3.5rem;
    height: 3.5rem;
  }
  .callout .callout-img img {
    border-radius: 0.125rem 0.125rem 0.125rem 0.75rem;
  }
  .callout header h2 {
    font-family: var(--font-family-large-heading);
    font-weight: var(--font-weight-large-heading);
    text-transform: var(--text-transform-large-heading);
    font-size: var(--font-size-large-heading-4);
    line-height: var(--line-height-large-heading-4);
    letter-spacing: var(--letter-spacing-large-heading-4);
    font-style: var(--font-style-large-heading);
  }
  .callout header p {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-size: var(--font-size-body-xs);
    line-height: var(--line-height-body-xs);
    letter-spacing: var(--letter-spacing-body-xs);
    font-style: var(--font-style-body);
  }
  .callout span.button.secondary.icon {
    display: none;
  }
}
.callout:hover {
  transform: translateX(0.25rem);
}
/*# sourceMappingURL=callouts.css.map */