.flex-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
}

.flex-column-center {
  border: 1px solid black;
  width:60%;
  box-sizing: border-box; /* Includes padding in the element's total width */
}
.flex-column-outer {
  border: 12px solid black;
  width:20%;
  box-sizing: border-box; /* Includes padding in the element's total width */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .flex-column {
    flex: 100%; /* Columns stack vertically on small screens */
  }