.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 120px 30px; /* Row gap: 120px, Column gap: 20px */
  position: relative;
}

.flex-container.cs-gap {
  gap: 60px 60px;
}
.flex-container.post-g-gap {
  gap: 30px 20px;
  justify-content: space-between;
}

.flex-item {
  flex: 0 1 calc(33.333% - 20px); /* Default: 3 columns */
}

.flex-container.cs-gap .flex-item {
  flex: 0 1 calc(33.333% - 40px); /* Default: 3 columns */
}
.flex-container.post-g-gap .flex-item {
  flex: 0 1 calc(33.333% - 15px); /* Default: 3 columns */
}

@media (max-width: 1024px) {
  .flex-container {
    gap: 60px 20px;
  }
  .flex-container.post-g-gap {
    gap: 30px 20px;
  }
  .flex-item {
    flex: 0 1 calc(50% - 20px); /* Tablet: 2 columns */
  }
  .flex-container.cs-gap .flex-item {
    flex: 0 1 calc(50% - 40px); /* Tablet: 2 columns */
  }
  .flex-container.post-g-gap .flex-item {
    flex: 0 1 calc(33.333% - 15px); /* Default: 3 columns */
  }
}

@media (max-width: 768px) {
  .flex-container {
    gap: 30px 20px;
  }
  .flex-container.cs-gap {
    gap: 40px;
  }
  .flex-container.post-g-gap {
    gap: 30px;
  }
  .flex-item {
    flex: 0 1 100%; /* Stick to one of the 3-column positions */
  }
  .flex-container.cs-gap .flex-item {
    flex: 0 1 100%; /* Stick to one of the 3-column positions */
  }
  .flex-container.post-g-gap .flex-item {
    flex: 0 1 100%; /* Stick to one of the 3-column positions */
  }
}