.columncontainer {
    display: flex;
    flex-wrap: wrap; /* Allows the columns to wrap onto the next line as needed */
    gap: 10px; /* Optional: Adds space between columns */
    align-items: stretch;
}

.fourcolumnitem {
    flex: 1; /* Each column will grow equally to fill the container */
    min-width: calc(25% - 10px); /* Subtract gap from width calculation */
    max-width: calc(25% - 10px); /* Ensures that each column takes up roughly one fourth of the container width, adjusting for the gap */
    text-align: center; /* Center the text inside each column */
    padding: 10px; /* Adds some padding inside each column for spacing */
    flex-direction:column;
}

    .fourcolumnitem > div {
        flex: 1; /* Ensures the content div takes up the remaining space */
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Distributes space between elements */
    }

.threecolumnitem {
    flex: 1; /* Each column will grow equally to fill the container */
    min-width: calc(33.333% - 10px); /* Subtract gap from width calculation */
    max-width: calc(33.333% - 10px); /* Ensures that each column takes up roughly one third of the container width, adjusting for the gap */
    text-align: center; /* Center the text inside each column */
    padding: 10px; /* Adds some padding inside each column for spacing */
    display:flex;
    flex-direction:column;
}


.twocolumnitem {
    flex: 1; /* Each column will grow equally to fill the container */
    min-width: calc(50% - 10px); /* Subtract gap from width calculation */
    max-width: calc(50% - 10px); /* Ensures that each column takes up roughly one third of the container width, adjusting for the gap */
    text-align: center; /* Center the text inside each column */
    padding: 10px; /* Adds some padding inside each column for spacing */
    
}

.onecolumnitem {
    flex: 1; /* Each column will grow equally to fill the container */
    min-width: calc(100% - 10px); /* Subtract gap from width calculation */
    max-width: calc(100% - 10px); /* Ensures that each column takes up roughly one third of the container width, adjusting for the gap */
    text-align: center; /* Center the text inside each column */
    padding: 10px; /* Adds some padding inside each column for spacing */
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .fourcolumnitem, .threecolumnitem, .twocolumnitem, .onecolumnitem {
        min-width: 100%; /* Each column takes full width on smaller screens */
        max-width: 100%; /* Adjusts the max-width to enforce single column layout */
    }
}