.grid {
  display: grid;
  gap: $unit-3x;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  @include breakpoint(tablet) {
    gap: $unit-2x;
  }

  @include breakpoint(phone) {
    gap: $unit;
  }

  .ExtraGrid.Weapons {
    background: var(--extra-purple-bg);
    border-radius: $card-corner;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1.42fr 3fr;
    justify-content: center;

    @include breakpoint(tablet) {
      left: auto;
      max-width: auto;
      width: 100%;
    }

    @include breakpoint(phone) {
      display: flex;
      gap: $unit-2x;
      padding: $unit-2x;
      flex-direction: column;
    }
  }
}
