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

.root[data-background='blue'] {
    background: linear-gradient(180deg, #9293b2 0%, #195675 25%, #142839 50%, #071015 75%, #111016 100%), #fff;
}

.root[data-background='yellow'] {
    background: linear-gradient(180deg, #d09b4d 0%, #d09b4d 25%, #613300 50%, #391c00 75%, #241100 100%), #fff;
}

.root[data-background='grey'] {
    background: linear-gradient(180deg, #b2b2b2 0%, #757575 25%, #393939 50%, #151515 75%, #161616 100%), #fff;
}

.container {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 100%;
    max-width: var(--content-max-width);
    height: 100%;
    overflow: hidden;
}

.headline {
    margin-top: 65px;
    color: var(--color-text-primary-inverted);
    margin-bottom: 60px;
}

.desktopGrid {
    width: 100%;
    height: 810px;
    position: relative;
    display: flex;
    margin-bottom: 45px;
}

.halfVector:first-child {
    top: 0;
    gap: 60px;
    display: flex;
    width: 100%;
    position: absolute;
}

.halfVector:last-child {
    bottom: 0;
    gap: 60px;
    display: flex;
    width: 100%;
    position: absolute;
}

.leftColumn,
.rightColumn {
    padding: 30px 0;
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.midColumn {
    padding: 57px 0;
    gap: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

.midColumn::before {
    top: 0;
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background: var(--border-color-alpha-white-20);
}

.midColumn::after {
    bottom: 0;
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background: var(--border-color-alpha-white-20);
}

.row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: 30px;
}

.horizontalVector {
    position: relative;
    flex: 1;
    width: 100%;
    height: var(--border-width-sm);
    background: var(--border-color-alpha-white-20);
}

.leftText,
.rightTopText,
.rightBotText {
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    color: var(--color-text-primary-inverted);
    max-width: 300px;
}

.leftText {
    margin-top: 52px;
    margin-bottom: 48px;
}

.rightTopText {
    margin-top: 32px;
    margin-bottom: 48px;
}
.rightBotText {
    margin-top: 52px;
    margin-bottom: 28px;
}
.image {
    object-fit: cover;
    width: 216px;
    height: 216px;
    border-radius: var(--border-radius-full);
}

.leftColumn::before,
.leftColumn::after,
.rightColumn::before,
.rightColumn::after {
    content: '';
    flex-grow: 1;
    position: relative;
    width: var(--border-width-sm);
    background: var(--border-color-alpha-white-20);
}

.rightVector {
    height: 250px;
    width: var(--border-width-sm);
    background: var(--border-color-alpha-white-20);
}

.mobileGrid {
    display: none;
}

@media screen and (width <= 768px) {
    .desktopGrid {
        display: none;
    }

    .container {
        padding: 40px 0;
        height: 100%;
    }

    .headline {
        margin: 0;
        padding: 40px;
        color: var(--color-text-primary-inverted);
        text-align: center;
    }

    .mobileGrid {
        display: flex;
        align-items: center;
        width: 100%;
        flex-direction: column;
        padding: 20px;
        gap: 32px;
    }

    .mobileColumn {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-left: 16px;
        padding-right: 16px;
    }

    .mobileText {
        margin-top: 32px;
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        padding: 0 8px;
        color: var(--color-text-primary-inverted);
        gap: 12px;
    }

    .image {
        margin-top: 60px;
        width: 240px;
        height: 240px;
    }

    .mobileContent {
        position: relative;
        display: flex;
        align-items: center;
    }

    .leftBorder,
    .rightBorder {
        top: 16px;
        position: absolute;
        height: 100%;
        width: var(--border-width-sm);
        background: var(--border-color-alpha-white-20);
    }

    .rightBorder {
        right: 0px;
    }

    .mobileColumn::before {
        content: '';
        position: relative;
        height: var(--border-width-sm);
        width: 100%;
        background: var(--border-color-alpha-white-20);
    }

    .mobileContent:last-child .mobileColumn::after {
        top: 32px;
        content: '';
        position: relative;
        height: var(--border-width-sm);
        width: 100%;
        background: var(--border-color-alpha-white-20);
    }
}