@mixin profile-form { form { display: flex; } fieldset { margin-bottom: 1rem; } label { @include font-type(light); display: block; margin-bottom: .2rem; } .project-details-image { flex-shrink: 0; flex-grow: 0; width: 180px; margin-right: 2rem; .image { width: 100%; } } .change-image { display: block; } .image-container { position: relative; margin-bottom: .5rem; } .loading-overlay { display: none; &.active { align-items: center; background: rgba($blackish, .8); bottom: 0; display: flex; left: 0; position: absolute; right: 0; top: 0; width: 100%; } } .loading-spinner { @include loading-spinner; border: 0; transform-origin: center center; } .use-default-image { @include font-size(x-small); display: block; margin-top: .25rem; text-align: center; &:hover { color: $red; } } .project-details-form-data { flex: 1; max-width: 500px; } @include breakpoint(tablet) { form { display: block; } } }