/* primary is main content, #secondary is sidebar */

#column-wrapper {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    padding: 60px 1rem 100px;

    .rounded img {
        border-radius: 1em;
    }

    .featured-image img,
    #primary {
        border-radius: 1rem 0 0 0;
    }

    .featured-image {
        display: flex;
    }

    #primary {
        background-color: var(--content-bg-color);
        flex: 7;

        &:has(.featured-image) {
            & > h1,
            .page-content {
                position: relative;
                top: -50px;
            }
        }

        &:not(&:has(.featured-image)) {
            & > h1 {
                width: 100%;
                background-color: var(--title-bg-color-2);
                border-radius: 1rem 0 0 0;
                clip-path: none;
            }
        }

        & > h1 {
            min-height: 100px;
            width: fit-content;
            background: linear-gradient(
                to bottom,
                var(--title-bg-color-1),
                var(--title-bg-color-2)
            );
            /* border-radius: 0 50px 50px 0; */
            clip-path: polygon(
                calc(100% - 60px) 0,
                100% 50%,
                calc(100% - 60px) 100%,
                0 100%,
                0 0
            );
            color: var(--title-text-color);
            display: flex;
            align-items: center;
            font-size: 2.25rem;
            line-height: 1.2;
            margin: 0;
            padding: 0 70px 0 30px;
            /* text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25); */
        }

        .page-content {
            padding: 1.5rem;
        }
    }

    #secondary {
        background-color: var(--sidebar-bg-color);
        border-radius: 0 1rem 0 0;
        color: var(--sidebar-text-color);
        flex: 3;
        padding: 1.5rem;
    }

    footer {
        min-height: 100px;
        width: 100%;
        background: linear-gradient(
            to bottom,
            var(--footer-bg-color-1),
            var(--footer-bg-color-2)
        );
        border-radius: 0 0 1rem 1rem;
        color: var(--footer-text-color);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;

        .sbi_feedtheme_header_text h3 {
            color: var(--footer-text-color) !important;
        }
    }

    @media screen and (width < 750px) {
        display: block;

        #primary {
            & > h1 {
                font-size: 2rem;
            }

            &:not(&:has(.featured-image)) {
                & > h1 {
                    border-radius: 1rem 1rem 0 0;
                }
            }
        }

        #secondary {
            border-radius: 0;
        }

        .featured-image img,
        #primary {
            border-radius: 1rem 1rem 0 0;
        }
    }
}