/* Block: How It Works */

.steps {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    gap:        var(--space-md);

    @media (min-width: 992px) {
        grid-template-columns: repeat(3, 1fr);
    }
}

.step {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.step__top {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   var(--space-lg);
}

.step__sprite {
    width:  48px;
    height: 48px;
    filter: drop-shadow(0 0 8px rgb(196 94 255 / 60%));
    transition: transform var(--transition-base);

    .step:hover & {
        transform: translateY(-4px);
        animation: sprite-bob .6s steps(2) infinite;
    }
}

@keyframes sprite-bob {
    50% { transform: translateY(-8px); }
}

.step__level {
    font:           var(--text-10pr);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--color-cyan);
}

.step__title {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.step__text {
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .step:hover .step__sprite {
        animation: none;
    }
}