.content-back-navigation {
    margin-bottom: 36px;
}

.content-back-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 52px;
    padding: 9px 18px 9px 10px;

    border: 1px solid var(--border);
    border-radius: 14px;

    color: var(--text);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            rgba(112, 64, 178, 0.16),
            var(--surface-raised) 68%
        );

    touch-action: manipulation;
}

.content-back-card__icon {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;

    border: 1px solid rgba(145, 97, 208, 0.34);
    border-radius: 10px;

    color: var(--brand-light);
    background: rgba(145, 97, 208, 0.1);

    transition:
        transform 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease;
}

.content-back-card__icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentcolor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.content-back-card:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: 4px;
}

@media (hover: hover) {
    .content-back-card:hover
    .content-back-card__icon {
        border-color: rgba(145, 97, 208, 0.7);
        background: rgba(145, 97, 208, 0.18);
        transform: translateX(-3px);
    }
}

@media (max-width: 640px) {
    .content-back-navigation {
        margin-bottom: 28px;
    }

    .content-back-card {
        max-width: 100%;
    }

    .content-back-card__label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-back-card__icon {
        transition: none;
    }
}