/* Główny kontener */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* Elastyczne kolumny jako baza */
  gap: 20px; /* Odstępy między kolumnami */
  padding: 20px;
  max-width: 1700px;
  margin: 0 auto;
}

/* Style dla elementów w gridzie */
.grid-item {
  background: #1a171785;
  padding: 20px;
  border-radius: 5px;
  height: auto;
}

/* Klasy szerokości inspirowane Twoim Flexboxem */
.grid-item.col-12 {
  grid-column: span 12; /* Zajmuje pełną szerokość */
  width: 100%;
}

.grid-item.col-9 {
  grid-column: span 9; /* 75% */
  /*width: calc(75% - 40px);*/
}

.grid-item.col-6 {
  grid-column: span 6; /* 50% */
  /*width: calc(50% - 40px);*/
}

.grid-item.col-4 {
  grid-column: span 6; /* 33.33% */
  /*width: calc(33.33% - 40px);*/
	max-width: 350px;
}

.grid-item.col-3 {
  grid-column: span 3; /* 25% */
  /*width: calc(25% - 40px);*/
}

.grid-item.col-2 {
  grid-column: span 2; /* 16.66% */
  /*width: calc(16.665% - 40px);*/
}
.grid-item.col-1 {
  grid-column: span 1; /* 16.66% */
  /*width: calc(16.665% - 40px);*/
}

/* Opcje z mniejszymi odstępami */
.grid-container.no-gap {
  gap: 0;
}

.grid-container.no-gap .grid-item {
  width: 100%; /* Pełna szerokość bez marginesów */
}

.grid-container.small-gap {
  gap: 10px;
}

.grid-container.small-gap .grid-item.col-12 { width: calc(100% - 20px); }
.grid-container.small-gap .grid-item.col-9 { width: calc(75% - 20px); }
.grid-container.small-gap .grid-item.col-6 { width: calc(50% - 20px); }
.grid-container.small-gap .grid-item.col-4 { width: calc(33.33% - 20px); }
.grid-container.small-gap .grid-item.col-3 { width: calc(25% - 20px); }
.grid-container.small-gap .grid-item.col-2 { width: calc(16.665% - 20px); }

/* Responsywność */
@media (max-width: 1000px) {
  .grid-container {
    grid-template-columns: 1fr; /* Jedna kolumna na małych ekranach */
  }
  .grid-item {
    grid-column: span 12; /* Wszystkie elementy zajmują pełną szerokość */
    width: 100%;
  }
}