/**
  * Highlighted page
 */

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

  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: calc(var(--spacing) * 1.5);
  container-type: inline-size;

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

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

  .card-body {
    padding: 0 0 0 calc(var(--spacing) * .75);

    @container (min-width: 768px) {
      padding: 0;
    }

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

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

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

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

  .card-image {
    order: -1;

    @container (min-width: 768px) {
      order: 0;
    }

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

    img {
      transition: var(--transition-image);
      aspect-ratio: 4 / 3;
    }
  }

  &.is-in-viewport {
    img {
      border-radius: var(--border-radius-image-reverse);

      .image-position-right & {
        border-radius: var(--border-radius-image);
      }
    }
  }
}