/**
  * Highlighted page
 */

.component-highlighted-page.card {
  --bs-card-bg: transparent;
  --card-border: 0;

  box-shadow: none !important;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row !important;
  column-gap: calc(var(--spacing) * 4.5);
  row-gap: var(--spacing-xl);
  container-type: inline-size;

  .card-body,
  .card-image {
    width: 100%;

    @container (width >= 768px) {
      width: calc(50% - var(--spacing) * 2.25) !important;
    }
  }

  .card-body {
    display: grid;
    gap: var(--card-spacing);
    padding: 0 0 0 var(--spacing-sm);

    @container (width >= 768px) {
      padding: 0;
    }

    > *:last-child {
      margin-bottom: 0;
    }

    h2 {
      font-size: var(--h2-font-size);
    }

    h3 {
      color: var(--body-font-color);
      margin-bottom: 0;
    }

    p {
      font-size: var(--font-size-20);
    }
  }

  .card-image {
    order: -1;

    .image-position-right & {
      order: 1;
    }

    img {
      border-radius: var(--border-radius-xxl) !important;
    }

    img {
      aspect-ratio: 3 / 2;
    }
  }
}