@media all and (min-width: 0px) {
    .shout-archive-item {
        position: relative;
        overflow: hidden;
        text-align: center;
        max-width: 100%;
        flex-basis: 100%;
        margin: 0.5em;
    }

    .shout-archive-item a:hover {
        color: inherit;
    }

    .shout-archive-item-thumbnail {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .shout-archive-item-thumbnail img {
        width: 100%;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }

    .shout-archive-content {
        padding: 15px 10px;
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        padding-left: 1.6em;
    }

    a.shout-archive-link {
        font-size: 1.2em;
        text-decoration: none;
        text-align: left;
        box-sizing: border-box;
        width: 100%;
    }

    a.shout-archive-link > i {
        opacity: 0;
        font-size: 0.8em;
    }

    .shout-archive-item:hover .shout-archive-content {
        padding-left: 1em;
    }

    .shout-archive-item:hover a.shout-archive-link > i {
        opacity: 100;
    }
}

@media all and (min-width: 800px) {
    .archive-items-wrapper .shout-archive-item {
        max-width: 45.5%;
        flex-basis: 45.5%;
    }
}

@media all and (min-width: 1000px) {
    .archive-items-wrapper .shout-archive-item {
        max-width: 30.2%;
        flex-basis: 30.2%;
    }
}