@include center-flex(16px);        // Centered horizontal flex with gap
@include center-flex-column(16px); // Centered vertical flex with gap
@include grid(3, 4, 16px);         // Grid with 3 rows, 4 columns, 16px gap
@include grid-auto(3, 4, 16px);    // Grid with auto rows/columns

@include absolute-center; // Center element absolutely (translate + inset)

@include single-ellipsis-effect;        // Truncate text with ... on one line
@include multiline-ellipsis-effect(3);  // Truncate after 3 lines

@include fit-image; // object-fit: cover + object-position: center

@include link-btn-styling;  // Full button styling with hover/active states
@include inputs-styling;    // Input field styling with focus states
@include card-styling;      // Card border and background

@include mobile-only { }
@include tablet-only { }
@include laptop-only { }
@include desktop-small-only { }
@include desktop-only { }
@include device-orientation(portrait) { }

.modal {
  @include center-flex-column(16px);
}

.user-avatar {
  @include fit-image;
  border-radius: 50%;
}

.description {
  @include multiline-ellipsis-effect(2);
}

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.user-avatar {
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}