.root {
    display: inline-flex;
    align-items: center;
    padding: 15px 24px;
    border-radius: var(--border-radius-full);
    background:
        linear-gradient(180deg, rgba(129, 177, 226, 0) 0%, rgba(129, 177, 226, 0.5) 100%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    position: absolute;
}

.benefitTag {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px 8px;
    color: var(--color-text-primary-inverted);
}

@media (width <= 768px) {
    .root {
        padding: 10px 16px;
    }

    .benefitTag {
        padding: 3px 6px;
    }
}
