.battle .title,
.battle .subtitle {
  text-align: center;
}
.battle .composition {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(4, calc(25% - 1.5rem));
  gap: 2rem;
}
/* .battle .composition .box {
  width: 100%;
  height: 25rem;
  background-color: #cacaca;
  border: 1rem solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
} */
.battle .composition .box img {
  max-width: 90%;
  max-height: 90%;
  border: 1rem solid #fff;
}
@media (max-width: 992px) {
  .battle .composition .box {
    height: 19rem;
  }
}
@media (max-width: 768px) {
  .battle .composition {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .battle .composition .box {
    width: 16rem;
  }
}
@media (max-width: 576px) {
  .battle .composition .box {
    width: 15rem;
    height: 15rem;
  }
}