@media all and (min-width: 0px) {
    .horizontal-archive-item {
        width: 100%;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-align-content: stretch;
        -ms-flex-line-pack: stretch;
        align-content: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
		margin:0.5em auto;
    }

    .horizontal-archive-item-thumbnail {
        width: 100%;
    }

    .horizontal-archive-content {
        width: 100%;
        padding: 1em;
    }

    .horizontal-archive-content > * {
        padding: 0.4em 0;
    }
}

@media all and (min-width: 800px) {
    .horizontal-archive-item {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .horizontal-archive-item-thumbnail {
        width: 33%;
    }

    .horizontal-archive-content {
        width: 64%;
        align-self: center;
        padding: 0.25em;
    }
}

@media all and (min-width: 1000px) {
    .horizontal-archive-item {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .horizontal-archive-item-thumbnail {
        width: 25%;
    }

    .horizontal-archive-content {
        width: 75%;
    }
}