.callout {
  color: var(--palette-default-fg-base);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: var(--spacing-base-space-1000);
  padding-inline: var(--spacing-base-space-1000);
}

/* Left column wrapper (preheader + headline) */
.callout > .callout-left {
  grid-column: 1;
  grid-row: 1;
}

/* Headline */
.callout h2,
.callout h3,
.callout h4 {
  font-family: var(--typography-family-title-slab);
  font-size: var(--typography-font-size-headlines-48);
  font-weight: var(--typography-weight-regular);
  line-height: var(--typography-line-height-lh-53);
  letter-spacing: var(--typography-letter-spacing-0-5);
  margin-block: 0 var(--spacing-base-space-200);
}

.callout > .callout-right {
  grid-column: 2;
  grid-row: 1;
  border-block-start: 1px solid var(--palette-default-stroke-base);
}

.callout > .callout-right.no-border {
  border: var(--typography-letter-spacing-0);
}

.callout p {
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-headlines-22);
  font-weight: var(--typography-weight-regular);
  line-height: var(--typography-line-height-lh-29);
  letter-spacing: var(--typography-letter-spacing-0);
  padding-block-start: var(--spacing-base-space-500);
  margin-block: 0 var(--spacing-base-space-500);
}

.with-siderail .callout {
  grid-template-columns: 1fr;
  padding-inline: 0;
}

.with-siderail .callout p {
  border-block-start: 0;
  padding-block-start: 0;
}

.callout > .callout-left > :first-child p {
  padding-block-start: 0;
  margin-block: 0 var(--spacing-base-space-500);
  font-size: var(--typography-font-size-headlines-18);
  line-height: var(--typography-line-height-lh-27);
  font-weight: var(--typography-weight-semi-bold);
}

.callout > .cta-wrapper {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
}

.with-siderail .callout > div {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
}

.callout:has(> .callout-right > :first-child:empty) > .cta-wrapper {
  grid-row: 1;
  padding-block-start: var(--spacing-base-space-200);
}

.with-siderail .callout > .callout-right {
  border-block-start: 0;
}

.with-siderail .callout:has(> .callout-right > :first-child:empty) > .cta-wrapper {
  grid-row: auto;
  padding-block-start: 0;
}

.callout > .callout-right:has(.cta-wrapper:only-child) {
  padding-block-start: var(--spacing-base-space-500);
}

@media (width <= 900px) {
  .callout {
    grid-template-columns: 1fr;
    padding-inline: 0;
  }

  .callout h2,
  .callout h3,
  .callout h4 {
    font-size: var(--typography-font-size-headlines-36);
    line-height: var(--typography-line-height-lh-40);
  }

  .callout p {
    font-size: var(--typography-font-size-headlines-20);
    line-height: var(--typography-line-height-lh-28);
    padding-block-start: 0;
  }

  .callout > .callout-left,
  .callout > .callout-right {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
    border: var(--typography-letter-spacing-0);
  }

  .callout > .callout-right {
    border-block-start: 0;
  }

  .callout:has(> .callout-right > :first-child:empty) > .cta-wrapper {
    grid-row: auto;
    padding-block-start: 0;
  }

  .callout > .callout-left > :first-child p {
    margin-block: 0 var(--spacing-base-space-300);
  }
}