/**
 * @file Fix layout issue caused by description wrapper on select components.
 *
 * The templates for some paragraphs were originally written in such a way that
 * `content.field_description.0` was passed to their components. This goes
 * against best practices, and they needed to be refactored to use
 * `content.field_description` instead in PR #6602. This had the side-effect of
 * rendering a wrapper element around the contents of the field, which impacted
 * the layout. The rules below accomplish two things:
 *
 * 1. `display: contents` tells the browser to effectively discount the wrapper
 * element from the layout, allowing the children elements to be rendered as if
 * the wrapper didn’t exist.
 * 2. `content: none` removes the `::after` pseudo-element that is added to
 * these elements via the `.clearfix` class.
 *
 * The end result is that layouts are preserved with no direct intervention in
 * individual component styles. A new ticket has been created to update the
 * styles for such components to account take this new field into account and
 * remove this fix.
 *
 * See: https://github.com/ChromaticHQ/benz-tickets/issues/4758.
 * See: https://github.com/ChromaticHQ/benz-platform/pull/6602.
 *
 * - Note that some of the selectors are scoped so as to only apply to the
 * container component’s field_description wrapper element. Otherwise, child
 * component elements are also affected.
 */
.paragraph--type--calls-to-action-container .calls-to-action__intro-description,
.paragraph--type--flip-card-container .flip-cards__description,
.paragraph--type--standalone-cta {
  .field--name-field-description {
    display: contents;

    &::after {
      content: none;
    }
  }
}