.hero--container {
    padding-bottom: 60px;
    text-align: center;
    color: var(--color-text-white);
}

.hero--badge {
    display: block;
    width: fit-content;
    background-color: var(--color-gold);
    color: var(--color-gold-text);
    text-align: center;
    padding: 30px 30px 10px 30px;
    line-height: 1.4em;
    clip-path: polygon(
        /* top-left corner */
        0px 30px, 15px 30px, 15px 15px, 30px 15px, 30px 0px,
        /* top-right corner */
        calc(100% - 30px) 0px, calc(100% - 30px) 15px, calc(100% - 15px) 15px, calc(100% - 15px) 30px, 100% 30px,
        /* bottom-right corner */
        100% calc(100% - 30px), calc(100% - 15px) calc(100% - 30px), calc(100% - 15px) calc(100% - 15px), calc(100% - 30px) calc(100% - 15px), calc(100% - 30px) 100%,
        /* bottom-left corner */
        30px 100%, 30px calc(100% - 15px), 15px calc(100% - 15px), 15px calc(100% - 30px), 0px calc(100% - 30px)
    );
    margin: 0 auto -60px;
}

.hero--badge hr {
    margin: 0 0 -20px;
    border-color: var(--color-gold-text);
}

@media (min-width: 992px) {
    .hero--badge {
        margin-right: -30px;
        margin-bottom: -80px;
        margin-top: -60px;
    }
}
@media (min-width: 1500px) {
    .hero--badge {
        margin-right: -60px;
        
    }
}

.hero--background {
    margin-bottom: 30px;
}

.hero--headline {
    margin-bottom: 0;
}

.hero--description {
    margin: 0 auto 30px;
    max-width: 750px;
}