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

.container {
  --border-top: .063rem solid #{int.$warmgray-100}; 
  --district-title-width: auto;
  --contest-title-width: 3.25rem;
  --expand-button-container-width: 1.5rem;
  
  @include int.container-at-least("sm") {
    --contest-title-width: 4.5rem;

    gap: int.$spacing-8;
    
  }

  @include int.container-at-least("md") {
    --contest-title-width: 5rem;
    --district-title-width: 5.625rem;
  }

  @include int.container-at-least("xl") {
    --district-title-width: 8rem;
  }
}

.districts {
  display: flex;
  flex-flow: column;
  gap: int.$spacing-4; 
  position: relative;

  @include int.container-at-least("sm") {
    gap: int.$spacing-8;
    
  }
}