.wp-block-ananeoo-different-design-sec.different-design-sec,
.different-design-sec {
    padding-block: clamp(48px, 6vw, 70px) 0;
    background: #e6f5f8;
    color: #003360;
}

.wp-block-ananeoo-different-design-sec.different-design-sec--nested,
.editor-styles-wrapper .wp-block-ananeoo-different-design-sec.different-design-sec--nested {
    padding-block: 0;
    background: transparent;
}

.wp-block-ananeoo-different-design-sec.different-design-sec--nested > .wp-block-ananeoo-row-layout,
.editor-styles-wrapper .wp-block-ananeoo-different-design-sec.different-design-sec--nested > .ananeoo-row-layout {
    width: 100%;
}

.different-design-sec__head {
    margin: 0 auto clamp(28px, 4vw, 40px);
    text-align: center;
}

.different-design-sec__head .eyebrow {
    display: block;
    color: #003360;
    font-size: var(--different-eyebrow-font-size, 1rem) !important;
    font-weight: 700;
    letter-spacing: .02em;
    margin-bottom: 8px;
    text-align: var(--different-eyebrow-text-align, inherit);
}

.different-design-sec__head h2 {
    color: #003360;
    font-size: var(--different-heading-font-size, clamp(1.55rem, 2.2vw, 2rem)) !important;
    font-weight: var(--different-heading-font-weight, 600);
    letter-spacing: 1px;
    line-height: 1.18;
    margin: 0;
    text-align: var(--different-heading-text-align, inherit);
}

.different-design-sec__head h2 strong,
.different-design-sec__head h2 b {
    font-weight: 700;
}

.different-design-sec__body {
    display: grid;
    grid-template-columns: minmax(330px, 0.9fr) minmax(360px, 1fr);
    gap: clamp(44px, 5vw, 70px);
    margin: 0 auto clamp(58px, 7vw, 70px);
}

.different-design-sec__body--has-media {
    grid-template-columns: minmax(210px, .75fr) minmax(280px, 1fr) minmax(280px, 1fr);
}

.different-design-sec__body--media-right.different-design-sec__body--has-media {
    grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(210px, .75fr);
}

.ananeoo-visibility-hide-mediaImage .different-design-sec__body--has-media {
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
}

.different-design-sec__media {
    align-self: center;
    margin: 0;
}

.different-design-sec__body--media-right .different-design-sec__media {
    order: 3;
}

.different-design-sec__media img {
    display: block;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.different-design-sec__info-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 42px rgb(0 31 54 / 18%);
    color: #003360;
    font-size: var(--different-lead-font-size, 19px) !important;
    line-height: 1.42;
    padding: clamp(18px, 2.4vw, 24px);
    text-align: var(--different-info-text-align, inherit);
}

.different-design-sec__info-card p {
    letter-spacing: 1px !important;
    margin: 0;
}

.wp-block-ananeoo-different-design-sec .different-design-sec__info-card p,
.editor-styles-wrapper .different-design-sec .different-design-sec__info-card p {
    letter-spacing: 1px !important;
}

.different-design-sec__info-card p + p {
    margin-top: 0.65em;
}

.different-design-sec__copy {
    color: #003360;
    text-align: var(--different-copy-text-align, inherit);
}

.different-design-sec__copy h3 {
    color: #003360;
    font-size: var(--different-point-font-size, clamp(1.05rem, 1.35vw, 1.28rem)) !important;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.25;
    margin: 0;
}

.different-design-sec__copy h3 + .different-design-sec__subtitle {
    margin-top: 6px;
}

.different-design-sec__copy p {
    color: #003360;
    font-size: var(--different-lead-font-size, 0.95rem) !important;
    letter-spacing: 1px !important;
    line-height: 1.35;
    margin: 4px 0 0;
}

.wp-block-ananeoo-different-design-sec .different-design-sec__copy p,
.editor-styles-wrapper .different-design-sec .different-design-sec__copy p {
    letter-spacing: 1px !important;
}

.different-design-sec__copy p + h3 {
    margin-top: 20px;
}

.different-design-sec__subtitle {
    font-weight: 700;
}

.different-design-sec__subtitle[data-ananeoo-text-key="different-nutrition-subtitle"]:not(.ananeoo-responsive-text-weight) {
    font-weight: 400;
}

.different-design-sec__cards {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: transparent !important;
    background-color: transparent !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 60px);
    padding: clamp(44px, 5vw, 58px) max(clamp(24px, 8vw, 180px), calc((100vw - 1110px) / 2 + 24px));
}

.different-design-sec__card {
    color: #003360;
    text-align: var(--different-card-text-align, center);
}

.different-design-sec__card:not(.different-design-sec__card--nested) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
    justify-items: center;
}

.different-design-sec__card:not(.different-design-sec__card--nested) > img,
.different-design-sec__card > .different-design-sec__card-icon {
    width: 66px;
    max-width: 66px;
    height: auto;
    object-fit: contain;
}

.different-design-sec__card h3 {
    color: #003360;
    font-size: var(--different-point-font-size, clamp(1.02rem, 1.35vw, 1.25rem)) !important;
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 8px;
}

.different-design-sec__card p {
    color: #003360;
    font-size: var(--different-lead-font-size, 0.92rem) !important;
    line-height: 1.38;
    margin: 0;
}

.wp-block-ananeoo-different-design-sec .different-design-sec__card .ananeoo-responsive-text.ananeoo-responsive-text,
.editor-styles-wrapper .different-design-sec__card .ananeoo-responsive-text.ananeoo-responsive-text {
    font-size: var(--ananeoo-font-desktop) !important;
}

.wp-block-ananeoo-different-design-sec .wp-block-ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
.wp-block-ananeoo-different-design-sec .ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
.editor-styles-wrapper .wp-block-ananeoo-different-design-sec .wp-block-ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
.editor-styles-wrapper .wp-block-ananeoo-different-design-sec .ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div) {
    color: var(--ananeoo-adv-color, inherit) !important;
    font-family: var(--ananeoo-adv-font-family, inherit) !important;
    font-size: var(--ananeoo-adv-font-size, inherit) !important;
    font-weight: var(--ananeoo-adv-font-weight, inherit) !important;
    letter-spacing: var(--ananeoo-adv-letter-spacing, inherit) !important;
    line-height: var(--ananeoo-adv-line-height, inherit) !important;
    margin: 0 !important;
}

.section-cta-wrap,
.section-cta {
    margin-top: 24px;
}

.different-design-sec .section-cta {
    font-size: var(--different-button-font-size, inherit) !important;
    text-align: var(--different-button-text-align, inherit);
}

@media (max-width: 900px) {
    .different-design-sec__head .eyebrow {
        font-size: var(--different-eyebrow-tablet-font-size, var(--different-eyebrow-font-size, 1rem)) !important;
        text-align: var(--different-eyebrow-tablet-text-align, var(--different-eyebrow-text-align, inherit));
    }

    .different-design-sec__head h2 {
        font-size: var(--different-heading-tablet-font-size, var(--different-heading-font-size, clamp(1.8rem, 4vw, 2.4rem))) !important;
        text-align: var(--different-heading-tablet-text-align, var(--different-heading-text-align, inherit));
    }

    .different-design-sec__info-card,
    .different-design-sec__copy p,
    .different-design-sec__card p {
        font-size: var(--different-lead-tablet-font-size, var(--different-lead-font-size, 1rem)) !important;
    }

    .different-design-sec__info-card {
        text-align: var(--different-info-tablet-text-align, var(--different-info-text-align, inherit));
    }

    .different-design-sec__copy {
        text-align: var(--different-copy-tablet-text-align, var(--different-copy-text-align, inherit));
    }

    .different-design-sec__card {
        text-align: var(--different-card-tablet-text-align, var(--different-card-text-align, inherit));
    }

    .different-design-sec__copy h3,
    .different-design-sec__card h3 {
        font-size: var(--different-point-tablet-font-size, var(--different-point-font-size, 1.2rem)) !important;
    }

    .wp-block-ananeoo-different-design-sec .different-design-sec__card .ananeoo-responsive-text.ananeoo-responsive-text,
    .editor-styles-wrapper .different-design-sec__card .ananeoo-responsive-text.ananeoo-responsive-text {
        font-size: var(--ananeoo-font-tablet, var(--ananeoo-font-desktop)) !important;
    }

    .wp-block-ananeoo-different-design-sec .wp-block-ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
    .wp-block-ananeoo-different-design-sec .ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
    .editor-styles-wrapper .wp-block-ananeoo-different-design-sec .wp-block-ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
    .editor-styles-wrapper .wp-block-ananeoo-different-design-sec .ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div) {
        font-size: var(--ananeoo-adv-font-size-tablet, var(--ananeoo-adv-font-size, inherit)) !important;
        letter-spacing: var(--ananeoo-adv-letter-spacing-tablet, var(--ananeoo-adv-letter-spacing, inherit)) !important;
        line-height: var(--ananeoo-adv-line-height-tablet, var(--ananeoo-adv-line-height, inherit)) !important;
    }

    .different-design-sec__body {
        grid-template-columns: 1fr;
        max-width: 680px;
    }

    .different-design-sec__body--has-media,
    .different-design-sec__body--media-right.different-design-sec__body--has-media {
        grid-template-columns: 1fr;
    }

    .different-design-sec__body--media-right .different-design-sec__media {
        order: 0;
    }

    .different-design-sec__media {
        justify-self: center;
        max-width: min(360px, 100%);
    }

    .different-design-sec__cards {
        grid-template-columns: 1fr;
    }

    .different-design-sec__card {
        max-width: 680px;
        margin-inline: auto;
        width: 100%;
    }

    .different-design-sec .section-cta {
        font-size: var(--different-button-tablet-font-size, var(--different-button-font-size, inherit)) !important;
        text-align: var(--different-button-tablet-text-align, var(--different-button-text-align, inherit));
    }
}

@media (max-width: 600px) {
    .different-design-sec {
        padding-block-start: 42px;
    }

    .different-design-sec__head h2 {
        font-size: var(--different-heading-mobile-font-size, var(--different-heading-tablet-font-size, var(--different-heading-font-size, 1.75rem))) !important;
        text-align: var(--different-heading-mobile-text-align, var(--different-heading-tablet-text-align, var(--different-heading-text-align, inherit)));
    }

    .different-design-sec__head .eyebrow {
        display: flex;
        align-items: center;
        font-size: var(--different-eyebrow-mobile-font-size, var(--different-eyebrow-tablet-font-size, var(--different-eyebrow-font-size, .95rem))) !important;
        text-align: var(--different-eyebrow-mobile-text-align, var(--different-eyebrow-tablet-text-align, var(--different-eyebrow-text-align, inherit)));
    }

    .different-design-sec__info-card,
    .different-design-sec__copy p,
    .different-design-sec__card p {
        font-size: var(--different-lead-mobile-font-size, var(--different-lead-tablet-font-size, var(--different-lead-font-size, 1.2rem))) !important;
    }

    .different-design-sec__copy h3,
    .different-design-sec__card h3 {
        font-size: var(--different-point-mobile-font-size, var(--different-point-tablet-font-size, var(--different-point-font-size, 1.15rem))) !important;
    }

    .wp-block-ananeoo-different-design-sec .different-design-sec__card .ananeoo-responsive-text.ananeoo-responsive-text,
    .editor-styles-wrapper .different-design-sec__card .ananeoo-responsive-text.ananeoo-responsive-text {
        font-size: var(--ananeoo-font-mobile, var(--ananeoo-font-tablet, var(--ananeoo-font-desktop))) !important;
    }

    .wp-block-ananeoo-different-design-sec .wp-block-ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
    .wp-block-ananeoo-different-design-sec .ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
    .editor-styles-wrapper .wp-block-ananeoo-different-design-sec .wp-block-ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div),
    .editor-styles-wrapper .wp-block-ananeoo-different-design-sec .ananeoo-advanced-heading > :where(h1, h2, h3, h4, h5, h6, p, span, div) {
        font-size: var(--ananeoo-adv-font-size-mobile, var(--ananeoo-adv-font-size-tablet, var(--ananeoo-adv-font-size, inherit))) !important;
        letter-spacing: var(--ananeoo-adv-letter-spacing-mobile, var(--ananeoo-adv-letter-spacing-tablet, var(--ananeoo-adv-letter-spacing, inherit))) !important;
        line-height: var(--ananeoo-adv-line-height-mobile, var(--ananeoo-adv-line-height-tablet, var(--ananeoo-adv-line-height, inherit))) !important;
    }

    .different-design-sec__info-card {
        text-align: var(--different-info-mobile-text-align, var(--different-info-tablet-text-align, var(--different-info-text-align, inherit)));
    }

    .different-design-sec__copy {
        text-align: var(--different-copy-mobile-text-align, var(--different-copy-tablet-text-align, var(--different-copy-text-align, inherit)));
    }

    .different-design-sec__card {
        text-align: var(--different-card-mobile-text-align, var(--different-card-tablet-text-align, var(--different-card-text-align, inherit)));
    }

    .different-design-sec__card:not(.different-design-sec__card--nested) {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 16px;
    }

    .different-design-sec__card:not(.different-design-sec__card--nested) > img,
    .different-design-sec__card > .different-design-sec__card-icon {
        width: 58px;
        max-width: 58px;
    }

    .different-design-sec .section-cta {
        font-size: var(--different-button-mobile-font-size, var(--different-button-tablet-font-size, var(--different-button-font-size, inherit))) !important;
        text-align: var(--different-button-mobile-text-align, var(--different-button-tablet-text-align, var(--different-button-text-align, inherit)));
    }
}