locomotive-boilerplate/assets/styles/components/_wysiwyg.scss

// ==========================================================================
// Components / Wysiwyg
// ==========================================================================

.c-wysiwyg {

    // ==========================================================================
    // Margins
    // ==========================================================================
    & > * + * {
        margin-bottom: size-clamp('md');
    }

    &-first-element,
    >:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    &-last-element,
    >:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    // ==========================================================================
    // Default
    // ==========================================================================
    // @include text;
    // @include body-large;

    // ==========================================================================
    // Headings
    // ==========================================================================
    h1,h2,h3,h4,h5,h6 {
        // @include heading;
        margin-top: 1.5em;
        margin-bottom: 1em;
    }

    h1 {
        // @include heading-h3;
    }

    h2 {
        // @include heading-h3;
    }

    h3 {
        // @include heading-h4;
    }

    h4 {
        // @include heading-h5;
    }

    h5 {
        // @include heading-h6;
    }

    h6 {
        // @include heading-h6;
    }

    // ==========================================================================
    // Lists
    // ==========================================================================
    ul,
    ol {
    }

    // ==========================================================================
    // Link
    // ==========================================================================
    a {
        color: $color-link;

        &:focus-visible {
            color: $color-link-focus;
        }

        @media (hover: hover) {
            &:hover {
                color: $color-link-hover;
            }
        }
    }

    // ==========================================================================
    // Image
    // ==========================================================================
    img {
        width: 100%;
    }

    // ==========================================================================
    // iFrame
    // ==========================================================================
    iframe {
        &:not([width]) {
            width: 100%;
        }

        &:not([height]) {
            height: auto;
        }
    }

    // ==========================================================================
    // Table
    // ==========================================================================
    table {
        width: 100%;
    }

    caption {
        // @include text;
        // @include body-small;
        margin: 1em 0;
    }

    // ==========================================================================
    // Blockquote
    // ==========================================================================
    blockquote {
        // @include heading;
        // @include heading-h3;
        quotes: "“" "”" "’" "’";
        padding: 0;

        p {
            &::before {
                content: open-quote;
            }

            &::after {
                content: close-quote;
            }
        }

        & + p {
            padding-top: 0;
        }
    }
}