/* Define a grid container for the three-column section */
.layout--threecol-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns by default */
  gap: var(--bs-gutter-x); /* Adjust the gap as needed */
}

@media screen and (max-width: 40em) {
  .layout--threecol-section {
    grid-template-columns: 1fr; /* One column */
  }
}

/* Media queries for different column layouts */
@media screen and (min-width: 40em) {
  .layout--threecol-section.layout--threecol-section--25-50-25 {
    grid-template-columns: 1fr 2fr 1fr; /* First column 25%, second column 50%, third column 25% */
  }

  .layout--threecol-section.layout--threecol-section--25-25-50 {
    grid-template-columns: 1fr 1fr 2fr; /* First column 25%, second column 25%, third column 50% */
  }

  .layout--threecol-section.layout--threecol-section--50-25-25 {
    grid-template-columns: 2fr 1fr 1fr; /* First column 50%, second column 25%, third column 25% */
  }

  .layout--threecol-section.layout--threecol-section--33-34-33 {
    grid-template-columns: 1fr 1.34fr 1fr; /* First column 33%, second column 34%, third column 33% */
  }
}