@use "../../../../../styles/int.scss";

.container {
  display: flex;
  flex-flow: row wrap;
  gap: int.$spacing-1;
  row-gap: 0;
  padding-bottom: int.$spacing-1;
  width: var(--district-title-width);

  @include int.container-at-least("sm") {
    flex-flow: column;
  }

  @include int.container-at-least("md") {
    padding-bottom: 0;
    gap: 0;
    border-top: var(--border-top);
    flex-flow: column;
  }

}

.title {
  @include int.title($size: "400", $weight: "bold");

  @include int.container-at-least("md") {
    @include int.title($size: "500", $weight: "bold");
  }

  @include int.container-at-least("xl") {
    @include int.title($size: "600", $weight: "bold");
  }

  @include int.container-at-least("xxl") {
    @include int.title($size: "700", $weight: "bold");
  }
}