@media all {
  body.join > main .trainers {
    background-color: #ECEEFF;
    color: #26325A;
  }
  body.join > main .trainers .grid {
    display: grid;
  }
  body.join > main .trainers .description {
    padding-right: 2em;
  }
  body.join > main .trainers .description .title {
    margin-bottom: 1em;
  }
  body.join > main .trainers .trainer {
    overflow: hidden;
  }
  body.join > main .trainers .trainer .image {
    aspect-ratio: 0.78;
  }
  body.join > main .trainers .trainer .info {
    background-color: white;
  }
  body.join > main .join {
    display: grid;
  }
}
@media (min-width: 850px) {
  body.join > main .trainers .grid {
    grid-template-columns: repeat(4, 1fr);
  }
  body.join > main .join .image {
    border-radius: 20px;
  }
}
@media (min-width: 1400px) {
  body.join > main .trainers {
    padding: 180px 0;
  }
  body.join > main .trainers .grid {
    gap: 20px;
  }
  body.join > main .trainers .description .title {
    font-size: 55px;
  }
  body.join > main .join {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 90px;
    margin-bottom: 90px;
  }
  body.join > main .join .image {
    grid-column: 1 / span 2;
    aspect-ratio: 1.3;
  }
}
@media (min-width: 850px) and (max-width: 1399px) {
  body.join > main .trainers {
    padding: 100px 0;
  }
  body.join > main .trainers .grid {
    gap: 15px;
  }
  body.join > main .trainers .description .title {
    font-size: 30px;
  }
  body.join > main .join {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 60px;
    margin-bottom: 60px;
  }
}
@media (max-width: 849px) {
  body.join > main .trainers {
    padding: 40px 0;
  }
  body.join > main .trainers .grid {
    gap: 40px;
  }
  body.join > main .trainers .description .title {
    font-size: 24px;
  }
  body.join > main .join {
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
  }
  body.join > main .join .image {
    aspect-ratio: 0.85;
    border-radius: 12px;
  }
}