.root {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.root[data-scheme='dark'] {
    background-color: black;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 64px 60px 120px;
    position: relative;
}

.container[data-view='plain_with_title'] {
    margin: 120px 60px;
}

.content {
    display: flex;
    align-items: center;
    position: absolute;
    padding-inline: 80px;
    z-index: 10;
}

.content[data-view='plain'] {
    padding: 40px;
    width: 50%;
}

.content[data-view='plain_with_title'] {
    display: block;
    padding: 0;
    padding-left: 90px;
    width: 50%;
}

.textAlignLeft {
    left: 0;
}

.textAlignRight {
    right: 0;
}

.textContainer {
    text-wrap: pretty;
    color: var(--color-text-primary-inverted);
}

.richTextContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 360px;
    color: var(--color-text-primary-inverted);
}

.plainWithTitleContainer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--color-text-primary-inverted);
}

.imageContainer {
    display: flex;
    align-items: center;
    width: 100%;
    max-height: 584px;
    overflow: hidden;
    border-radius: var(--border-radius-xl);
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.mobileImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: none;
}

@media (width <= 1090px) and (width >= 900px) {
    .container {
        margin-inline: 20px;
    }
    .content {
        padding: 60px;
    }
    .content[data-view='plain_with_title'] {
        padding-left: 40px;
    }
    .content[data-view='complex'] {
        padding-left: 0px 60px;
    }
    .textContainer span {
        font-size: var(--font-size-heading-lg);
    }
    .richTextContainer {
        max-width: 300px;
    }
}

@media (width < 900px) and (width >= 768px) {
    .container {
        margin-inline: 20px;
    }
    .container[data-view='plain_with_title'] {
        padding: 0;
        margin-inline: 20px;
    }
    .content {
        padding: 40px;
    }
    .content[data-view='plain_with_title'] {
        padding-left: 40px;
    }
    .content[data-view='complex'] {
        padding: 0px 60px;
    }
    .textContainer {
        font-size: var(--font-size-heading-sm);
    }
    .titleOfPlainWithTitle {
        font-size: var(--font-size-heading-xl);
    }
    .textOfPlain {
        font-size: var(--font-size-heading-md);
    }
    .richTextContainer {
        max-width: 300px;
    }
    .richTextTitle p {
        font-size: var(--font-size-heading-lg);
    }
}

@media (width <= 768px) {
    .container[data-view='plain_with_title'] {
        margin: 64px 20px;
    }
    .container {
        gap: 20px;
        margin: 40px 20px;
    }
    .content {
        border-radius: var(--border-radius-lg);
        padding: 0;
    }

    .content[data-view='plain_with_title'], .content[data-view='plain'] {
        width: 100%;
        padding: 0;
    }

    .textContainer {
        color: var(--color-text-primary);
        max-width: 100%;
    }

    .plainWithTitleContainer {
        color: var(--color-text-primary);
    }

    .richTextContainer {
        max-width: 100%;
        gap: 16px;
    }

    .richTextContainerTitle {
        font-size: var(--font-size-heading-xl);
    }

    .imageContainer {
        border-radius: var(--border-radius-lg);
    }

    .image {
        aspect-ratio: 335/250.94;
        display: none;
    }

    .mobileImage {
        display: block;
    }

    .content {
        position: static;
    }

    .textAlignLeft {
        left: auto;
    }

    .textAlignRight {
        right: auto;
    }
}

.content[data-text-color='white'] .textContainer,
.content[data-text-color='white'] .richTextContainer,
.content[data-text-color='white'] .plainWithTitleContainer .textOfPlainWithTitle {
    color: var(--color-text-primary-inverted);
}

.content[data-text-color='black'] .textContainer,
.content[data-text-color='black'] .richTextContainer,
.content[data-text-color='black'] .plainWithTitleContainer .textOfPlainWithTitle {
    color: var(--color-text-primary);
}

.content[data-text-color='solar'] .textContainer,
.content[data-text-color='solar'] .richTextContainer,
.content[data-text-color='solar'] .plainWithTitleContainer .textOfPlainWithTitle {
    color: var(--color-text-primary-brand-solar);
}

.content[data-text-color='indigo'] .textContainer,
.content[data-text-color='indigo'] .richTextContainer,
.content[data-text-color='indigo'] .plainWithTitleContainer .textOfPlainWithTitle {
    color: var(--color-text-primary-brand-indigo);
}

.content[data-title-color='white'] .plainWithTitleContainer .titleOfPlainWithTitle {
    color: var(--color-text-primary-inverted);
}

.content[data-title-color='black'] .plainWithTitleContainer .titleOfPlainWithTitle {
    color: var(--color-text-primary);
}

.content[data-title-color='solar'] .plainWithTitleContainer .titleOfPlainWithTitle {
    color: var(--color-text-primary-brand-solar);
}

.content[data-title-color='indigo'] .plainWithTitleContainer .titleOfPlainWithTitle {
    color: var(--color-text-primary-brand-indigo);
}

@media (width <= 768px) {
    .content[data-mobile-text-color='white'] .textContainer,
    .content[data-mobile-text-color='white'] .richTextContainer,
    .content[data-mobile-text-color='white'] .plainWithTitleContainer .textOfPlainWithTitle {
        color: var(--color-text-primary-inverted);
    }

    .content[data-mobile-text-color='black'] .textContainer,
    .content[data-mobile-text-color='black'] .richTextContainer,
    .content[data-mobile-text-color='black'] .plainWithTitleContainer .textOfPlainWithTitle {
        color: var(--color-text-primary);
    }

    .content[data-mobile-text-color='solar'] .textContainer,
    .content[data-mobile-text-color='solar'] .richTextContainer,
    .content[data-mobile-text-color='solar'] .plainWithTitleContainer .textOfPlainWithTitle {
        color: var(--color-text-primary-brand-solar);
    }

    .content[data-mobile-text-color='indigo'] .textContainer,
    .content[data-mobile-text-color='indigo'] .richTextContainer,
    .content[data-mobile-text-color='indigo'] .plainWithTitleContainer .textOfPlainWithTitle {
        color: var(--color-text-primary-brand-indigo);
    }

    .content[data-mobile-title-color='white'] .plainWithTitleContainer .titleOfPlainWithTitle {
        color: var(--color-text-primary-inverted);
    }

    .content[data-mobile-title-color='black'] .plainWithTitleContainer .titleOfPlainWithTitle {
        color: var(--color-text-primary);
    }

    .content[data-mobile-title-color='solar'] .plainWithTitleContainer .titleOfPlainWithTitle {
        color: var(--color-text-primary-brand-solar);
    }

    .content[data-mobile-title-color='indigo'] .plainWithTitleContainer .titleOfPlainWithTitle {
        color: var(--color-text-primary-brand-indigo);
    }
}