{# Cards standing in for the variants while the list loads. #}
<div class="phx-grid" aria-hidden="true">
    {% for _ in skeleton_range %}
        <div class="phx-card sync-card sync-skeleton">
            <div class="sync-card__media"></div>
            <div class="sync-skeleton__line" style="width:{% cycle '68%' '75%' '60%' '72%' '63%' '70%' '58%' '66%' %}"></div>
            <div class="sync-skeleton__line" style="width:{% cycle '42%' '55%' '38%' '50%' '45%' '58%' '35%' '48%' %}"></div>
        </div>
    {% endfor %}
</div>