/* When a blue component is followed by a component with no background colour, add a padding top on the latter */
.paragraph.c-bg--blue + .paragraph:not(.c-bg--blue) {
  padding-top: var(--padding-large);
}

.paragraph:not(.c-bg--blue) + .paragraph.c-bg--blue {
  padding-top: var(--padding-large);
}

/* When any component is below the showpiece component, add a padding top on the former */
.showpiece + .paragraph {
  padding-top: var(--padding-large);
}

/* Reduced spacings: certain components have reduced bottom spacing when follows by another specific component */
.paragraph--type--copy:has(+ .paragraph--type--copy),
.paragraph--type--copy:has(+ .paragraph--type--quote),
.paragraph--type--copy:has(+ .paragraph--type--image-grid),
.paragraph--type--copy:has(+ .paragraph--type--text-block),
.paragraph--type--copy:has(+ .embedded-view),
.paragraph--type--copy + .paragraph--type--copy,
.paragraph--type--copy + .paragraph--type--quote,
.paragraph--type--copy + .paragraph--type--image-grid,
.paragraph--type--quote + .paragraph--type--quote,
.paragraph--type--quote + .paragraph--type--copy,
.paragraph--type--quote:has(+ .paragraph--type--text-block),
.paragraph--type--quote + .paragraph--type--image-grid,
.paragraph--type--image-grid + .paragraph--type--copy,
.paragraph--type--image-grid + .paragraph--type--quote,
.embedded-view + .embedded-view,
.embedded-view:has(+ .embedded-view) {
  padding-bottom: var(--padding-small);
}

/* WYSIWYG spacing. */
.media--view-mode-wysiwyg-full-width,
.media--view-mode-wysiwyg-half-width {
  margin-bottom: var(--spacing-4);
}

.align-center {
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .media--view-mode-wysiwyg-half-width {
    max-width: calc(50% - var(--spacing-2)); /* Ensures that image is always 50% of the container.*/
  }

  .align-left {
    float: left;
    margin-right: var(--spacing-4);
    margin-bottom: 0;
  }

  .align-right {
    float: right;
    margin-left: var(--spacing-4);
    margin-bottom: 0;
  }
}