.se-design-surface-muted {
    background-color: var(--wp--preset--color--surface, #f6f7f9);
}

.se-design-surface-alt {
    background-color: var(--wp--preset--color--surface-2, #ebf1f9);
}

.se-design-surface-warm {
    background-color: var(--wp--preset--color--surface-warm, #fff7ef);
}

.se-design-surface-accent {
    background-color: var(--wp--preset--color--primary, #f26a21);
    color: #fff;
}

.se-design-surface-contrast {
    background-color: var(--wp--preset--color--contrast, #1f2933);
    color: #fff;
}

.se-design-surface-transparent {
    background-color: transparent;
}

.se-design-align-left {
    text-align: left;
}

.se-design-align-center {
    text-align: center;
}

.se-design-align-center .wp-block-buttons,
.se-design-align-center .se-block-compose__slot > .wp-block-buttons {
    justify-content: center;
}

.se-design-align-right {
    text-align: right;
}

.se-design-align-right .wp-block-buttons,
.se-design-align-right .se-block-compose__slot > .wp-block-buttons {
    justify-content: flex-end;
}

.se-design-valign-start,
.se-design-valign-center,
.se-design-valign-end {
    display: flex;
    flex-direction: column;
}

.se-design-valign-start {
    justify-content: flex-start;
}

.se-design-valign-center {
    justify-content: center;
}

.se-design-valign-end {
    justify-content: flex-end;
}

.se-design-has-width .se-block-compose,
.se-design-has-width .se-feature,
.se-design-has-width .se-section-head,
.se-design-has-width .se-block-compose__slot {
    max-width: var(--se-design-width, 760px);
}

.se-design-align-center.se-design-has-width .se-block-compose,
.se-design-align-center.se-design-has-width .se-feature,
.se-design-align-center.se-design-has-width .se-section-head,
.se-design-align-center.se-design-has-width .se-block-compose__slot {
    margin-inline: auto;
}

.se-design-has-overlay {
    position: relative;
    isolation: isolate;
}

.se-design-has-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.se-design-has-overlay > * {
    position: relative;
    z-index: 1;
}

.se-design-overlay-solid::before {
    background: var(--se-design-overlay-color, #1f2933);
    opacity: calc(var(--se-design-overlay, 0%) / 100);
}

.se-design-overlay-tone-light.se-design-overlay-solid::before {
    background: var(--se-design-overlay-color, #ffffff);
}

.se-design-overlay-gradient-left::before {
    background: linear-gradient(
        108deg,
        color-mix(in srgb, var(--se-design-overlay-color, #1f2933) var(--se-design-overlay, 48%), transparent) 0%,
        transparent 72%
    );
}

.se-design-overlay-gradient-right::before {
    background: linear-gradient(
        252deg,
        color-mix(in srgb, var(--se-design-overlay-color, #1f2933) var(--se-design-overlay, 48%), transparent) 0%,
        transparent 72%
    );
}

.se-design-overlay-gradient-top::before {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--se-design-overlay-color, #1f2933) var(--se-design-overlay, 48%), transparent) 0%,
        transparent 72%
    );
}

.se-design-overlay-gradient-bottom::before {
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--se-design-overlay-color, #1f2933) var(--se-design-overlay, 48%), transparent) 0%,
        transparent 72%
    );
}

.se-design-overlay-tone-light.se-design-overlay-gradient-left::before,
.se-design-overlay-tone-light.se-design-overlay-gradient-right::before,
.se-design-overlay-tone-light.se-design-overlay-gradient-top::before,
.se-design-overlay-tone-light.se-design-overlay-gradient-bottom::before {
    --se-design-overlay-color: #ffffff;
}

.se-block-compose {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.se-block-compose--after .se-block-compose__slot {
    order: 2;
}

.se-block-compose--after .se-block-compose__dynamic {
    order: 1;
}

.se-block-compose__slot.is-editor,
.editor-styles-wrapper .se-block-compose__slot {
    min-height: 2.5rem;
    outline: 1px dashed rgb(242 106 33 / 40%);
    outline-offset: 6px;
    padding: 0.35rem 0.15rem;
}

.se-design-media-right .se-feature__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.se-design-media-right .se-feature__media {
    order: 2;
}

.se-design-media-right .se-feature__body {
    order: 1;
}

.se-design-media-top .se-feature__grid,
.se-design-media-bottom .se-feature__grid {
    grid-template-columns: 1fr;
}

.se-design-media-bottom .se-feature__media {
    order: 2;
}

.se-design-media-bottom .se-feature__body {
    order: 1;
}

.se-design-media-left .se-feature__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.se-feature__grid--no-media {
    grid-template-columns: 1fr;
}

@media (max-width: 640px) {
    .se-design-media-right .se-feature__grid,
    .se-design-media-left .se-feature__grid {
        grid-template-columns: 1fr;
    }

    .se-design-media-right .se-feature__media,
    .se-design-media-right .se-feature__body {
        order: 0;
    }
}
