.wrapper {
    overflow: hidden;
}

.badge {
    position: absolute;
    z-index: 20;
    width: 14em;
    height: 14em;
}
.badge .inner-badge {
    position: absolute;
    top: 50%;
    left: 50%;
}
.badge .inner-badge span {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}

.badge .inner-badge .badge-text-1 {
    font-size: 1.5em;
    padding: .1em .3em .4em;
    border: .07em solid #fff;
}

.badge .inner-badge .badge-text-2 {
    position: absolute;
    font-size: .8em;
    top: 2.7em;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 .3em;
}

.badge-1 {
    display: none;
}

.badge-2 {
    top: 1em;
    right: -4em;
    background: url(/img/_patterns/free_teaser_right.svg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.badge-2 .inner-badge {
    transform: translate(-50%, -50%) rotate(20deg);
}
.badge-2 .inner-badge .badge-text-2 {
    background: #2ec45b;
}

@media (min-width: 568px) {
    .badge {
        font-size: .8em;
    }

    .badge-2 {
        right: auto;
        left: 16em;
    }
}

@media (min-width: 568px) and (min-height: 601px) {
    .badge-1 {
        display: block;
        top: 2%;
        right: 70vw;
        background: url(/img/_patterns/free_teaser_left.svg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .badge-1 .inner-badge {
        transform: translate(-50%, -50%) rotate(-20deg);
    }
    .badge-1 .inner-badge .badge-text-2 {
        background: #f98b35;
    }

    .badge-2 {
        top: 3%;
        right: auto;
        left: 70vw;
    }
}

@media (min-width: 768px) and (min-height: 610px) {
    .badge {
        font-size: 1em;
    }
    .badge .inner-badge .badge-text-1 {
        font-size: 1.8em;
        padding: .1em .3em .2em;
    }
    .badge .inner-badge .badge-text-2 {
        top: 3em;
    }

    .badge-1 {
        right: 64vw;
    }
    .badge-1 .inner-badge {
        left: 47%;
    }

    .badge-2 {
        top: 50%;
        left: 64vw;
        transform: translateY(-50%);
    }
    .badge-2 .inner-badge {
        left: 53%;
    }
}


@media (min-width: 992px) {
    .badge {
        font-size: 1.2em;
    }

    .badge-1 {
        right: 69vw;
    }

    .badge-2 {
        left: 69vw;
        transform: none;
    }
}

@media (max-width: 1025px) and (min-height: 1240px) {
    .badge {
        font-size: 1em;
    }

    .badge-1 {
        right: 64vw;
    }

    .badge-2 {
        left: 64vw;
        transform: translateY(-50%);
    }
}

@media (min-width: 1240px) {
    .badge {
        font-size: 3.3vh;
    }

    .badge-1 {
        right: 69vw;
    }

    .badge-2 {
        left: 69vw;
    }
}