/**
 * @file
 * Basic styling for Media with text paragraph.
 */
.media-with-text--media-left {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .media-with-text--media-left .media-with-text__inner {
    max-width: var(--width-container);
    margin-inline: auto;
  }
  .media-with-text--media-left .media-with-text__inner {
    display: flex;
    align-items: center;
  }

  .media-with-text--media-top .media-with-text__body {
    max-width: 450px;
  }
}

.media-with-text--media-top .media-with-text__inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.media-with-text--media-left .media-with-text__body {
  padding-inline-start: var(--spacing);
}

.media-with-text--media-right .media-with-text__body {
  padding-inline-end: var(--spacing);
}

.media-with-text--media-top .media-with-text__body {
  text-align: center;
}

.media-with-text--media-top .media-with-text__media {
  margin-block-end: var(--spacing);
  display: flex;
  justify-content: center;
}