.widgets-container {
    width: 100%;
    /* Instead of setting column-count in CSS, do it in JS. */
    /*-webkit-column-count: 3; !* for Safari/WebKit *!*/
    /*-moz-column-count: 3;    !* for Firefox *!*/
    /*column-count: 3; !* Default to 3 columns *!*/
    column-gap: 1em; /* Gap between columns */
    /*grid-template-columns: repeat(3, minmax(480px, 1fr)); !* Default to 3 columns *!*/
    /*grid-template-columns: repeat(3, minmax(640px, 1fr));*/
    flex-wrap: wrap;
    gap: 2px; /* Adjust the space between widgets */
    position: relative;
    overflow: hidden; /* Prevent overflowing elements */
    zoom: 1; /* Default scale */
    transform-origin: top left; /* For transform-based scaling */
    box-sizing: border-box;
    transition: zoom 0.3s ease; /* Smooth scaling transitions */
    background-color: var(--mud-palette-background); /* Example background */

}

@media (max-width: 1920px) {
    .widgets-container {
        column-count:3; /* 3 columns for viewport <= 1920px */
    }
}

@media (max-width: 960px) {
    .widgets-container {
        column-count: 2; /* 2 columns for viewport <= 900px */
        /*grid-template-columns: repeat(1, minmax(480px, 1fr));*/
    }
}

@media (max-width: 480px) {
    .widgets-container {
        column-count: 1; /* 1 column for viewport <= 600px */
        /*grid-template-columns: 1fr;*/
    }
}

.masonry {
    margin-left: -10px; /* Adjust this value based on your desired gutter size */
    width: auto;
}

.masonry .widget {
    margin-left: 2px; /* Adjust this value based on your desired gutter size */
    margin-bottom: 2px; /* Adjust this value based on your desired gutter size */
    box-sizing: border-box;
}

.widget {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: inline-block; /* Ensure widgets are treated as blocks within columns */
    width: 100%; /* Ensure widgets take full width of the column */
    transform-origin: top left;
    margin-bottom: 1px; /* Adjust the margin as needed */
    margin-right: 2px;
    zoom:0.7;
}