/* Container */
.ff-container {
  margin-right: auto;
  margin-left: auto;
  width: 90%;
  display: grid;
}

.ff-container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  display: grid;
}

/* Row */
.ff-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

/* Column sizes based on a 12-column layout */
.ff-col {
  grid-column: span 12;
}

.ff-col-1 {
  grid-column: span 1;
}
.ff-col-2 {
  grid-column: span 2;
}
.ff-col-3 {
  grid-column: span 3;
}
.ff-col-4 {
  grid-column: span 4;
}
.ff-col-5 {
  grid-column: span 5;
}
.ff-col-6 {
  grid-column: span 6;
}
.ff-col-7 {
  grid-column: span 7;
}
.ff-col-8 {
  grid-column: span 8;
}
.ff-col-9 {
  grid-column: span 9;
}
.ff-col-10 {
  grid-column: span 10;
}
.ff-col-11 {
  grid-column: span 11;
}
.ff-col-12 {
  grid-column: span 12;
}

@media (max-width: 768px) {
  /* Stacking columns on small screens */
  .ff-col {
    grid-column: span 12;
  }
}