.index__boys {
    float: left;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));
}

.boy__grid {
  width: 1fr;
  height: 400px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
  .boy__grid > a > .photo {
    width: 100%;
    height: 400px;
    float: left;
    margin: 0 0 0 0;
    transition: transform 0.9s ease;
  }

.boy__grid:hover > a > span.photo {
    transform: scale(1.3); /* Увеличение изображения на 30% */
}

.info {
    position: absolute;
    width: 260px;
    top: 300px; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%);
    color: white; /* Цвет текста */
    text-align: center; /* Центрирование текста */
    text-decoration: none; /* Убираем подчеркивание */
    padding: 6px 0;
    z-index: 1; /* Устанавливаем выше изображения */
    background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для читаемости (опционально) */
    border-radius: 3px; /* Скругление углов */
    font-size: 14pt;
}

.info span {
    display: block; /* Переносим текст на новую строку */
}

@media (max-width: 360px) {
    .grid-container {
        grid-template-columns: 1fr; /* Один блок на маленьких экранах */
    }
}