.container {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.teamsContainer {
  display: grid;
  column-gap: var(--s-6);
  grid-template-columns: 1fr;
  row-gap: var(--s-10);
}

.teamName {
  display: flex;
  align-self: center;
  border-block-end: 2px solid var(--theme);
  font-size: var(--fonts-lg);
  font-weight: var(--extra-bold);
  justify-self: center;
}

.membersContainer {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.member {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.orderNumber {
  color: var(--theme-secondary);
  font-size: var(--fonts-sm);
  font-weight: bold;
}

.teamListTitle {
  margin-block-end: var(--s-8);
  margin-block-start: 0;
  text-align: center;
}

@media screen and (min-width: 640px) {
  .teamsContainer {
    grid-template-columns: 1fr 1fr;
  }

  .teamName {
    border-bottom: none;
    justify-self: flex-end;
  }

  .membersContainer {
    border-inline-start: 2px solid var(--theme);
    padding-inline-start: var(--s-6);
  }
}
