.cq-ava {
    display: block;
    width: var(--cq-ava-size, var(--cq-ava-sm));
    height: var(--cq-ava-size, var(--cq-ava-sm));
    flex: 0 0 var(--cq-ava-size, var(--cq-ava-sm));
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--cq-light);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cq-ava > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.cq-ava--xs { --cq-ava-size: var(--cq-ava-xs); }
.cq-ava--sm { --cq-ava-size: var(--cq-ava-sm); }
.cq-ava--md { --cq-ava-size: var(--cq-ava-md); }
.cq-ava--lg { --cq-ava-size: var(--cq-ava-lg); }
.cq-ava--xl { --cq-ava-size: var(--cq-ava-xl); }

.cq-ava--tren-anh { background-color: rgba(255, 255, 255, .35); }

@media (max-width: 640px) {
    .cq-ava--sm { --cq-ava-size: var(--cq-ava-xs); }
    .cq-ava--xl { --cq-ava-size: 64px; }
}