.more-link {
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    color: var(--polynesian-blue);
    padding: 0.5rem;
    transition: color 0.15s ease-in-out;
}

.more-link .short-right-arrow {
    display: inline-block;
    fill: var(--polynesian-blue);
    margin-left: 6px;
    transition: fill 0.15s ease-in-out, transform 0.2s ease-in-out;
}

.more-link:focus-within,
.more-link:focus-within .short-right-arrow {
    color: var(--bleu-de-france);
    fill: var(--bleu-de-france);
}

.more-link:hover .short-right-arrow,
.more-link:focus-within .short-right-arrow {
    transform: translateX(4px);
}