.team-display {
  margin: var(--space-xl) 0;

  & > .title {
    margin-bottom: var(--space-md);
  }

  & > .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-top: var(--space-md);
  }

  & > .container > .team {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);

    & > .heading {
      margin-top: 0;
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-sm);
      border-bottom: 2px solid var(--glass-border);
      color: var(--color-white);
    }

    & > .players {
      list-style: none;
      padding: 0;
      margin: 0;

      & > .player {
        padding: var(--space-sm);
        margin: 0 0 var(--space-sm);
        background: var(--color-black-alpha-20);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-white-alpha-10);
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-wrap: wrap;
        color: var(--color-white);

        & > form {
          margin: 0;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .team-display > .container {
    grid-template-columns: 1fr;
  }
}