/* editorial */
section.editorial {
    /* controls base font size for content */
    /* mobile size */
    --font-size-base: 6px;
    /* desktop size */
    @media (min-width: 992px) {
        --font-size-base: 8px;
    }

    & .editorial-content {

        /* basic structure */
        display: flex;
        flex-direction: column;
        gap: calc(var(--font-size-base) * 3);

        /* headings */
        & h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-canela);
            font-weight: 500;
            line-height: 1em;
            color: var(--sand);
            margin: 0;
            padding: 0;
        }
        /* add margin only if heading has an element before */
        & * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
            margin-top: calc(var(--font-size-base) * 2);
        }
        /* font sizes */
        & h1 {
            font-size: calc(var(--font-size-base) * 6);
        }
        & h2 {
            font-size: calc(var(--font-size-base) * 5);
        }
        & h3 {
            font-size: calc(var(--font-size-base) * 4);
        }
        & h4 {
            font-size: calc(var(--font-size-base) * 3);
        }
        & h5 {
            font-size: calc(var(--font-size-base) * 2.5);
        }
        & h6 {
            font-size: calc(var(--font-size-base) * 2);
        }

        /* text */
        & p, ul, ol, a {
            font-size: calc(var(--font-size-base) * 2);
            & :not(strong) {
                font-weight: 300;
            }
            line-height: 1.75em;
            color: var(--color-paragraph);
            padding: 0;
            margin: 0;
        }

        /* lists */
        & ul, ol {
            display: flex;
            flex-direction: column;
            padding-left: calc(var(--font-size-base) * 2);
        }

        /* link */
        & a {
            &:hover {
                text-decoration: none;
            }
        }

        /* content align, default start */
        text-align: start;
        align-items: flex-start;
        &.--content-center {
            text-align: center;
            align-items: center;
        }
        &.--content-end {
            text-align: end;
            align-items: flex-end;
        }
    }

    /* content with alternating images */
    & .editorial-with-image {
        max-width: var(--container-small-width);
        margin-left: auto;
        margin-right: auto;
        display: flex;
        gap: calc(var(--font-size-base) * 4);
        flex-direction: column;

        & .editorial-content, .editorial-img {
            flex: 1;
        }

        & + .editorial-with-image {
            margin-top: calc(var(--font-size-base) * 10);
        }
        
        @media (min-width: 768px) {
            flex-direction: row;
            align-items: center;
            
            /* every even element with image */
            &:nth-child(even) {
                & .editorial-content {
                    padding-left: 6.5%;
                }
            }
            
            /* every odd element with image */
            &:nth-child(odd) {
                flex-direction: row-reverse;

                & .editorial-content {
                    padding-right: 6.5%;
                }
            }
        }

    }

    & .editorial-with-sidebar {
        display: flex;
        flex-direction: column;
        gap: calc(var(--font-size-base) * 7.5);

        & .editorial-sidebar {
            display: flex;
            flex-direction: column;
            gap: var(--safe-space);

            @media (min-width: 576px) and (max-width: 991.92px) {
                flex-direction: row;
                align-items: flex-start;
                & .sidebar-content {
                    flex: 1;
                }
            }

            /* cta style */
            .sidebar-cta {
                text-decoration: unset;
                color: var(--white);
                background-color: var(--red);
                border-radius: 3px;
                padding: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                transition: all var(--transition-standard);

                & svg {
                    width: 15px;
                    color: inherit;
                }

                &:hover {
                    background-color: var(--red-dark);
                }
            }

            /* content style */
            & .sidebar-content {
                padding: calc(var(--safe-space) * 1);
                display: flex;
                flex-direction: column;

                & .sidebar-content__col {
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--safe-space) / 2);

                    /* text styling */
                    & h1, h2, h3, h4, h5, h6 {
                        font-weight: 700;
                        text-transform: uppercase;
                    }
                    & p, h1, h2, h3, h4, h5, h6 {
                        color: var(--color-paragraph);
                        margin: 0;
                    }
                    & p {
                        font-weight: 300;
                        line-height: 1.5em;
                    }
                    /* add margin only if heading has an element before */
                    & * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {
                        margin-top: calc(var(--font-size-base) * 2);
                    }
                    /* font sizes */
                    & h1 {
                        font-size: calc(var(--font-size-base) * 6);
                    }
                    & h2 {
                        font-size: calc(var(--font-size-base) * 5);
                    }
                    & h3 {
                        font-size: calc(var(--font-size-base) * 4);
                    }
                    & h4 {
                        font-size: calc(var(--font-size-base) * 3);
                    }
                    & h5 {
                        font-size: calc(var(--font-size-base) * 2.5);
                    }
                    & h6 {
                        font-size: calc(var(--font-size-base) * 2);
                    }
                }

                /* variants */
                &.--row {
                    flex-direction: row;
                    & .sidebar-content__col {
                        align-items: center;
                        flex: 1;
                        &:first-child {
                            padding-right: calc(var(--safe-space) / 1.5);
                        }

                        & p {
                            font-size: 13px;
                        }
                    }
                    & .sidebar-content__col + .sidebar-content__col {
                        border-left: 1px solid #DFDBD8;
                        padding-left: calc(var(--safe-space) / 1.5);
                    }
                }
                &.--light {
                    background-color: var(--sand-light);
                }
                &.--dark {
                    background-color: var(--sand-alt);
                }
            }
        }

        @media (min-width: 992px) {
            flex-direction: row;

            & .editorial-sidebar {
                width: 356px;
                flex: 0 0 auto;
            }
        }
    }
}