.avatarEdit .avatarType {
display: flex;
> dt {
flex: 0 0 auto;
order: 2;
}
> dd {
order: 1;
}
.avatarUploadButtonContainer {
margin-top: 10px;
}
@include screen-md-up {
/* use fixed height to ensure a constant gap between
with and without an image */
min-height: 100px;
> dt:not(:empty) {
margin: 0 0 0 30px;
}
> dd {
flex: 1 1 auto;
}
& + .avatarType {
margin-top: 30px;
}
.avatarUploadButtonContainer {
margin-left: 24px;
}
}
@include screen-sm-down {
flex-wrap: wrap;
> dt:not(:empty) {
flex: 0 0 100%;
margin-top: 20px;
text-align: center;
}
> dd {
flex: 0 0 100%;
}
.avatarUploadButtonContainer {
text-align: center;
}
}
}