.bbd-image-with-text {
  > .container {
    row-gap: var(--gap-xl);
  }
}

.bbd-image-with-text__media {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    grid-column: 1 / span 8;

    .bbd-image-with-text--right & {
      grid-row: 1;
      grid-column: 5 / -1;
    }
  }
}

.bbd-image-with-text__image {
  width: 100%;
  aspect-ratio: 35/45;

  @media screen and (min-width: 750px) {
    aspect-ratio: 91/62;
  }

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.bbd-image-with-text__content {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);

  @media screen and (min-width: 750px) {
    grid-column: 9 / -1;
    justify-content: flex-end;
    gap: var(--gap-2xl);
    padding-inline-start: var(--padding-lg);

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

    .bbd-image-with-text--right & {
      grid-row: 1;
      grid-column: 1 / span 4;
    }
  }
}