.contentWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 540px;
    border-radius: var(--border-radius-lg);
    cursor: auto;
    pointer-events: auto;
}

.contentWrapper.light {
    background-color: var(--color-bg-base-light);
}

.contentWrapper.dark {
    background-color: var(--color-bg-fill-alpha-white-10);
    backdrop-filter: blur(25px);
}

.contentWrapper[data-image-position='side-image'] {
    width: 720px;
    height: 465px;

    & > .content {
        order: 1;
    }

    & > .imageWrapper {
        order: 2;
    }
}

.contentWrapper[data-image-position='header-image'] {
    width: 600px;
    height: 627px;
    flex-direction: column;

    & > .content {
        order: 2;
        padding: 32px 48px;
    }

    & > .imageWrapper {
        order: 1;
        width: 100%;
        height: 240px;
    }
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 60px;
    border-radius: var(--border-radius-lg);
    gap: 32px;
    cursor: auto;
}

.text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.imageWrapper {
    display: flex;
    padding: 8px;
    width: 240px;
    height: 100%;
    flex: 0 0 auto;
}

.image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    border-radius: 20px;
}

@media (width <= 768px) {
    .contentWrapper {
        width: calc(100% - 20px - 20px); /* paddings from left and right */
    }

    .imageWrapper {
        display: none;
    }

    .contentWrapper[data-image-position='side-image'],
    .contentWrapper[data-image-position='header-image'] {
        width: calc(100% - 20px - 20px); /* paddings from left and right */
        height: fit-content;
        flex-direction: column;

        & > .content {
            order: 2;
            padding: 32px;
        }

        & > .imageWrapper {
            order: 1;
            width: 100%;
            height: 240px;
        }
    }

    .content {
        padding: 48px 32px;
    }
}