.hero--container {
    position: relative;
    padding-bottom: 0;
    text-align: center;
    color: var(--color-text-white);
}

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

.hero--badge {
    position: absolute;
    left: 0;
    bottom: -24px;
    z-index: 2;
    width: fit-content;
    max-width: 80%;
    background-color: var(--color-gold);
    color: var(--color-gold-text);
    text-align: center;
    padding: 15px 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)
    );
}

@media (max-width: 500px) {
    .hero--badge {
        position: relative;
        top: auto;
        bottom: auto;
        margin-top: -15px;
        width: 100%;
        max-width: none;
    }
}

.hero--badge hr {
    margin: 8px 0;
    border: 0;
    border-top: 1px solid var(--color-gold-text);
}

@media (min-width: 992px) {
    .hero--badge {
        bottom: -32px;
        padding: 36px 40px 16px 40px;
    }
}