* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
  color: white;
  font-family: sans-serif;
  text-transform: uppercase;
}

.main {
  background-color: black;
  display: flex;
  justify-content: center;
  padding-block: 1em;
}

.bots {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.bots__bot {
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.7em;
  display: flex;
  flex-direction: column;
  list-style-type: none;
  margin-inline: auto;
  padding: 0.5em;
  row-gap: 0.5em;
  width: clamp(320px, 90%, 420px);
}

.bot__name {
  font-size: 1.4rem;
  text-align: center;
}

.bot__img {
  width: 100%;
}

@media (width >= 720px) {
  .bots__bot {
    width: 300px;
    margin-inline: initial;
  }
}