.vizento-crystal {
    align-items: center;
    aspect-ratio: 0.86;
    background: linear-gradient(145deg, #f7f8f6 0%, #9da5a0 48%, #eef1ee 100%);
    clip-path: polygon(50% 0, 92% 27%, 78% 82%, 50% 100%, 22% 82%, 8% 27%);
    color: #080908;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 3.6rem;
}

.vizento-crystal::before {
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.68), transparent 42%, rgba(5, 5, 5, 0.22));
    clip-path: polygon(50% 0, 92% 27%, 50% 44%, 8% 27%);
    content: "";
    inset: 0;
    position: absolute;
}

.vizento-crystal::after {
    border: 1px solid rgba(8, 9, 8, 0.44);
    clip-path: inherit;
    content: "";
    inset: 3px;
    position: absolute;
}

.vizento-crystal > span {
    font-family: inherit;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.08em;
    line-height: 1;
    position: relative;
}

.vizento-crystal--small {
    width: 1.7rem;
}

.vizento-crystal--small > span {
    font-size: 0.62rem;
}

.vizento-crystal--large {
    width: clamp(5rem, 8vw, 8rem);
}

.vizento-crystal--large > span {
    font-size: clamp(1.7rem, 3vw, 2.8rem);
}

@media (prefers-reduced-motion: no-preference) {
    a:hover .vizento-crystal,
    button:hover .vizento-crystal {
        transform: translateY(-2px) rotate(-2deg);
        transition: transform 180ms ease;
    }
}