/* Passport profile photos: 350x450 (35mm x 45mm). Circle views use cover + top bias for faces. */
:root {
    --snv-profile-passport-ratio: 350 / 450;
    --snv-profile-photo-xs: 44px;
    --snv-profile-photo-sm: 50px;
    --snv-profile-photo-md: 70px;
    --snv-profile-photo-lg: 88px;
    --snv-profile-photo-xl: 100px;
    --snv-profile-photo-2xl: 120px;
    --snv-profile-photo-3xl: 150px;
}

.snv-profile-photo {
    display: block;
    object-fit: cover;
    object-position: center top;
    background: #f0f8f6;
    flex-shrink: 0;
}

/* Override global img rules in main.css (object-position: left top; height: auto; max-width: 100%) */
img.snv-profile-photo {
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    vertical-align: middle;
}

.snv-profile-photo--circle {
    border-radius: 50%;
    aspect-ratio: 1;
    overflow: hidden;
}

.snv-profile-photo--passport {
    aspect-ratio: var(--snv-profile-passport-ratio);
    border-radius: 4px;
}

.snv-profile-photo--xs { width: var(--snv-profile-photo-xs); }
.snv-profile-photo--circle.snv-profile-photo--xs,
img.snv-profile-photo.snv-profile-photo--circle.snv-profile-photo--xs {
    height: var(--snv-profile-photo-xs) !important;
    min-height: var(--snv-profile-photo-xs);
}

.snv-profile-photo--sm { width: var(--snv-profile-photo-sm); }
.snv-profile-photo--circle.snv-profile-photo--sm,
img.snv-profile-photo.snv-profile-photo--circle.snv-profile-photo--sm {
    height: var(--snv-profile-photo-sm) !important;
    min-height: var(--snv-profile-photo-sm);
}

.snv-profile-photo--md { width: var(--snv-profile-photo-md); }
.snv-profile-photo--circle.snv-profile-photo--md,
img.snv-profile-photo.snv-profile-photo--circle.snv-profile-photo--md {
    height: var(--snv-profile-photo-md) !important;
    min-height: var(--snv-profile-photo-md);
}

.snv-profile-photo--lg { width: var(--snv-profile-photo-lg); }
.snv-profile-photo--circle.snv-profile-photo--lg,
img.snv-profile-photo.snv-profile-photo--circle.snv-profile-photo--lg {
    height: var(--snv-profile-photo-lg) !important;
    min-height: var(--snv-profile-photo-lg);
}

.snv-profile-photo--xl { width: var(--snv-profile-photo-xl); }
.snv-profile-photo--circle.snv-profile-photo--xl,
img.snv-profile-photo.snv-profile-photo--circle.snv-profile-photo--xl {
    height: var(--snv-profile-photo-xl) !important;
    min-height: var(--snv-profile-photo-xl);
}

.snv-profile-photo--2xl { width: var(--snv-profile-photo-2xl); }
.snv-profile-photo--circle.snv-profile-photo--2xl,
img.snv-profile-photo.snv-profile-photo--circle.snv-profile-photo--2xl {
    height: var(--snv-profile-photo-2xl) !important;
    min-height: var(--snv-profile-photo-2xl);
}

.snv-profile-photo--3xl { width: var(--snv-profile-photo-3xl); }
.snv-profile-photo--circle.snv-profile-photo--3xl,
img.snv-profile-photo.snv-profile-photo--circle.snv-profile-photo--3xl {
    height: var(--snv-profile-photo-3xl) !important;
    min-height: var(--snv-profile-photo-3xl);
}

.snv-profile-photo-frame {
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f8f6;
    flex-shrink: 0;
    vertical-align: middle;
    line-height: 0;
}

.snv-profile-photo-frame--circle {
    border-radius: 50%;
}

.snv-profile-photo-frame--circle.snv-profile-photo--xs { width: var(--snv-profile-photo-xs); height: var(--snv-profile-photo-xs); }
.snv-profile-photo-frame--circle.snv-profile-photo--sm { width: var(--snv-profile-photo-sm); height: var(--snv-profile-photo-sm); }
.snv-profile-photo-frame--circle.snv-profile-photo--md { width: var(--snv-profile-photo-md); height: var(--snv-profile-photo-md); }
.snv-profile-photo-frame--circle.snv-profile-photo--lg { width: var(--snv-profile-photo-lg); height: var(--snv-profile-photo-lg); }
.snv-profile-photo-frame--circle.snv-profile-photo--xl { width: var(--snv-profile-photo-xl); height: var(--snv-profile-photo-xl); }
.snv-profile-photo-frame--circle.snv-profile-photo--2xl { width: var(--snv-profile-photo-2xl); height: var(--snv-profile-photo-2xl); }
.snv-profile-photo-frame--circle.snv-profile-photo--3xl { width: var(--snv-profile-photo-3xl); height: var(--snv-profile-photo-3xl); }

.snv-profile-photo-frame .snv-profile-photo {
    width: 100%;
    height: 100% !important;
    min-height: 0;
    border-radius: 0;
    aspect-ratio: auto;
}

.snv-profile-photo-frame.mx-auto {
    display: inline-flex;
}