/**
 * Content Element: iPad Pro 01 (Codename: iPro Hero)
 *
 * Block: ce-pro
 */

.v-3em {
    margin: 3em 0;
}
.b-2em {
    margin: 0 0 2em;
}

.ce-pro {
    --color-primary: #fff;
    --color-text-default: #a1a1a6;

    --font-text-headline: 2.4rem;
    --font-text-highlight: 2.3rem;
    --font-text-default: 1.15rem;
    --font-text-small: 0.875rem;

    --font-weight-headline: 500;
    --font-weight-default: 400;

    --line-height-headline: 1.15;
    --line-height-default: 1.47;
    --line-height-small: 1.47;

    --flex-base-header: 100%;
    --flex-base-text-block: 100%;
    --flex-base-hero-image: 100%;
    --flex-base-badges: 100%;

    --width-hero-image: 100%;
    --pull-hero-image-left: auto;
    --pull-hero-image-right: auto;

    --width-wrapper: 87.5%;
    --max-width-wrapper: 360px;
    --max-width-hero-image: auto;

    font-size: var(--font-text-default);
    color: var(--color-text-default);
    line-height: var(--line-height-default);
}

.ce-pro.--light-mode {
    --color-primary: 000#fff;
    --color-text-default: #333;

    background-color: #fff;
    z-index: -1;
}

.ce-pro, .ce-pro * {
    transition: color 225ms, background-color 225ms;
}

.ce-pro a {
    color: var(--color-primary);
}

.ce-pro__wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    width: var(--width-wrapper);
}

.ce-pro__header {
    flex-basis: var(--flex-base-header);
    color: var(--color-primary);
    font-size: var(--font-text-headline);
    font-weight: var(--font-weight-headline);
    line-height: var(--line-height-headline);
    margin-bottom: 1.2rem;
}

.ce-pro__text-block {
    flex-basis: var(--flex-base-text-block);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-default);
}

.ce-pro__text-block__headline {
    display: inline;
    color: var(--color-primary);
    font-size: var(--font-text-default);
    font-weight: var(--font-weight-headline);
}

.ce-pro__text-block__text {
    display: inline;
}

.ce-pro__hero-image {
    max-width: var(--max-width-hero-image);
    flex-basis: var(--flex-base-hero-image);
    margin-top: 2em;
}
.ce-pro__caption {
    width: 100%;
    text-align: center;
    font-size: 18px;
}
.ce-pro__hero-image__wrapper {
    position: relative;
    z-index: -1;
    width: var(--width-hero-image);
    left: var(--pull-hero-image-left);
    right: var(--pull-hero-image-right);
}

.ce-pro.--mobile-left-pull {
    --width-hero-image: 150vw;
    --pull-hero-image-left: -45%;
}

.ce-pro.--mobile-left-pull-soft {
    --width-hero-image: 110vw;
    --pull-hero-image-left: -25%;
}

.ce-pro.--mobile-right-pull {
    --width-hero-image: 150vw;
    --pull-hero-image-right: 0;
}

.ce-pro.--mobile-right-pull-soft {
    --width-hero-image: 110vw;
    --pull-hero-image-right: 0;
}

.ce-pro__hero-image__wrapper.--pull {
    margin-bottom: -33.33%;
}

.ce-pro__hero-image img,
.ce-pro__hero-image video {
    max-width: 100%;
}

.ce-pro__hero-image .--mirror {
    margin-bottom: -25%;
}

.ce-pro__badges {
    padding: 0;
    margin: 0;
    flex-basis: var(--flex-base-badges);
}

.ce-pro__badges__badge {
    margin: 0;
}

.badges_3 .ce-pro__badges__badge {
    max-width: 250px;
    float: left;
    font-size: 23px;
}

.ce-pro__badges__badge-content {
    margin: 1.5rem 0;
    line-height: 1.1;
}

.ce-pro__badges__badge-value {
    display: inline-block;
    padding: 20px 0 10px;
    font-size: var(--font-text-highlight);
    font-weight: var(--font-weight-headline);
}

.ce-pro__badges__badge-caption {
    display: block;
    font-size: var(--font-text-small);
    font-weight: 300;
}

.ce-pro__badges.--inline .ce-pro__badges__badge:first-child,.ce-pro__badges.--inline.badges_3 .ce-pro__badges__badge:first-child  {
    margin-left: 0;
}

@media screen and (min-width:480px) {

}

@media screen and (min-width: 768px) {
    .ce-pro {
        --font-text-headline: 3.6rem;
        --font-text-highlight: 2.6rem;
        --font-text-default: 1.25rem;
        --font-text-small: 0.875rem;

        --font-weight-default: 500;

        --width-hero-image: 100%;
        --pull-hero-image-left: auto;
        --pull-hero-image-right: auto;
        --max-width-wrapper: auto;
        --width-wrapper: 692px;
    }

    .ce-pro__header {
        margin-bottom: 2.8rem;
    }

    .ce-pro__text-block {
        max-width: 83.3333%;
    }

    .ce-pro__badges {
        margin-top: -1.6rem;
    }

    .ce-pro__badges__badge {
        overflow: hidden;
    }

    .ce-pro.--merge-text\+badges,
    .ce-pro.--merge-badges\+text {
        --flex-base-badges: 40%;
        --flex-base-text-block: 60%;
    }

    .ce-pro.--merge-text\+badges .ce-pro__text-block { order: 5; max-width: none; }
    .ce-pro.--merge-text\+badges .ce-pro__badges { order: 6; padding-left: 3.5rem; }

    .ce-pro.--merge-badges\+text .ce-pro__text-block { order: 6; max-width: none; }
    .ce-pro.--merge-badges\+text .ce-pro__badges { order: 5; padding-right: 3.5rem; }

    .ce-pro.--order-image-last .ce-pro__hero-image { order: 10; }

    .ce-pro.--merge-image\+text,
    .ce-pro.--merge-text\+image {
        --flex-base-hero-image: 50%;
        --flex-base-text-block: 50%;
    }

    .ce-pro.--merge-image\+text .ce-pro__hero-image { order: 5; }
    .ce-pro.--merge-image\+text .ce-pro__text-block { order: 6; padding-left: 2rem; padding-right: 0;
        margin-top: 5em; }

    .ce-pro.--merge-text\+image .ce-pro__hero-image { order: 6; }
    .ce-pro.--merge-text\+image .ce-pro__text-block { order: 5; }

    .ce-pro.--mobile-left-pull {
        --width-hero-image: 120vw;
        --pull-hero-image-left: -30vw;
        --max-width-hero-image: 50%;
    }

    .ce-pro.--mobile-right-pull {
        --width-hero-image: 120vw;
        --pull-hero-image-right: 0;
        --max-width-hero-image: 50%;
    }

    .ce-pro.--mobile-left-pull-soft {
        --width-hero-image: 75vw;
        --pull-hero-image-left: auto;
        --max-width-hero-image: 50%;
    }

    .ce-pro.--mobile-right-pull-soft {
        --width-hero-image: 75vw;
        --pull-hero-image-right: auto;
        --max-width-hero-image: 50%;
    }
}

@media screen and (min-width: 992px) {
    .ce-pro {
        --font-text-headline: 4.35rem;
        --font-text-default: 1.58rem;
        --font-text-highlight: 3.4rem;

        --line-height-default: 1.2;

        --width-hero-image: 100%;
        --pull-hero-image-left: auto;
        --pull-hero-image-right: auto;

        --width-wrapper: 980px;
    }

    .ce-pro.--merge-text\+badges .ce-pro__text-block {  }
    .ce-pro.--merge-text\+badges .ce-pro__badges { padding-left: 88px; }

    .ce-pro.--merge-badges\+text .ce-pro__text-block {  }
    .ce-pro.--merge-badges\+text .ce-pro__badges { padding-right: 88px; }

    .ce-pro.--mobile-left-pull,
    .ce-pro.--mobile-right-pull {
        --max-width-hero-image: none;
        --width-hero-image: 100%;
        --pull-hero-image-left: auto;
        --pull-hero-image-right: auto;
    }

    .ce-pro.--merge-image\+text .ce-pro__text-block { padding-left: 5rem; padding-right: 0; }

    .ce-pro__badges.--inline {
        margin-top: 0;
    }

    .ce-pro__badges.--inline .ce-pro__badges__badge {
        display: inline-block;
        margin-left: 1rem;

        --font-text-highlight: 25px;
        --font-text-small: 20px;
    }
    .ce-pro__badges.--inline.badges_3 .ce-pro__badges__badge {
        margin-left: 25px;
        --font-text-small: 18px;
    }
}

@media screen and (min-width:1440px) {

}