html,
body {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

.container {
    margin: 0 auto;
    width: 100%;
}

.masonry {
    column-count: 4;
    column-gap: 1em;
    margin: 1em auto 3em auto;
    width: 99%;
}

.masonry01-item {
    background-color: #ddd;

    /* next line switches direction of flow from vertical to horizontal */
    display: inline-block;

    /* note next line creates between elements and the one below; AND bigger than the column-gap */
    margin: 0 0 10px 0;

    /* Next line bizarrely makes the parent div occupy full width of window; though putting this in the parent class does NOT work */
    width: 100%;
    padding: 0.3em;
}

.masonry01-one {
    font-size: 4em;
}

.masonry01-two {
    font-size: 3.5em;
}

.masonry01-three {
    font-size: 3.1em;
}

.masonry01-four {
    font-size: 2.7em;
}

.masonry01-five {
    font-size: 2.4em;
}

.masonry01-six {
    font-size: 2.1em;
}

.masonry01-seven {
    font-size: 1.8em;
}

.masonry01-eight {
    font-size: 1.5em;
}

.masonry01-nine {
    font-size: 1.2em;
}

.masonry01-ten {
    font-size: 0.9em;
}

@media only screen and (min-width: 1024px) {
    .masonry {
        column-count: 4;
    }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .masonry {
        column-count: 3;
    }
}

@media only screen and (max-width: 767px) and (min-width: 540px) {
    .masonry {
        column-count: 2;
    }
}

@media only screen and (max-width: 539px) {
    .masonry {
        column-count: 1;
    }
}