.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 колонок для гибкости */
  grid-auto-rows: 150px; /* базовая высота блока */
  gap: 15px;
  padding: 15px;
}

.main{
  color:#f0daa5;
}

.darkgreen{
  color:#74a892;
  
}
 
.idk {
  display: flex;        
  justify-content: center;    
  align-items: center;     

  background-color: #fbf2c4;
  border-radius: 40px;
  height: 40px;
  padding: 20px;     
  max-width: 90%;
  margin: 20px auto;   

  text-align: center;  
}



  
  
  

.top-section {
  display: flex;
  gap: 20px;           /* расстояние между блоками */
  align-items: flex-start;
  margin-left: 20px;
  
}

/* твои блоки можно оставить почти без изменений */
.about,
.player {
  max-width: 30%;
  background-color: #b8cdab;
  border-radius: 40px;      /* ширина блока */
  height: auto;             /* высота подстраивается под содержимое *//* сверху 20px, справа 0, снизу 20px, слева 20px */

  text-align: left;
}









/* Базовый стиль для всех блоков */
.grid-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Разные размеры блоков */
.grid-item.large {
  grid-column: span 2; /* шире на 2 колонки */
  grid-row: span 2;    /* выше на 2 ряда */
}

.grid-item.tall {
  grid-row: span 2; /* выше в 2 раза */
}

.grid-item.wide {
  grid-column: span 3; /* шире на 3 колонки */
}

/* Контент внутри */
.grid-item img, .grid-item video, .grid-item canvas, .grid-item audio {
  max-width: 100%;
  display: block;
  margin: 10px auto;
}