.background-gradient {
    background: linear-gradient(90deg, #000 0%, #737373 100%);
}

.hero-content {
    position: relative;
    color: white;
}

.hero-content dl>div {
    margin-bottom: 0.5em;
}

.hero-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/static/img/humandesign/logo_blank.png') no-repeat;
    background-position-x: center;
    background-position-y: 100px;
    opacity: 0.1;
}

@media screen and (min-width: 600px) {
    .hero-content::before {
        background-position-y: center;
        background-size: contain;
    }

}

.tiktok-code {
    position: relative;
}

.wow-image {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 60%;
    height: auto;
    z-index: 99;
    transform: rotate(-22deg);
}

.decoder-grid {
    --bulma-grid-row-gap: 4rem;
    --bulma-grid-column-gap: 8rem;
    max-width: 1040px;
    margin: 0 auto;
}

.decoder-box {
    padding: 2rem var(--bulma-box-padding);
    border: 2px solid white;
    text-align: center;
    position: relative;
}

.decoder-box .title {
    margin-top: 1rem;
}

.decoder-box figure {
    max-width: 300px;
    margin: 0 auto;
}

.decoder-box li:not(:last-child) {
    margin-bottom: 1em;
}

.price-badge {
    position: absolute;
    background-image: url('/static/img/humandesign/price_tag.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 2rem;
    text-align: center;
    top: -20px;
    right: -7px;
    z-index: 999;
}

.price-badge > p:first-child {
    position: absolute;
    rotate: -20deg;
    left: 40%;
    top: 20px;
}

.price-badge > p:nth-child(2) {
    color: red;
    rotate: 10deg;
}

.price-badge > p:last-child {
    rotate: -10deg;
    position: absolute;
    bottom: 26px;
    left: 26px;
}