.article-select
{
font-size: 52px;
letter-spacing: -3px;
line-height: 1.1;
font-weight: bold;
font-family: "Alte Haas Grotesk",Arial,sans-serif;
}

.article-select ul
{
list-style-type: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}

.article-select ul li
{
float: left;
position: relative;
margin: .3em;
}

.article-select a
{
display: block;
width: 350px;
height: 175px;
background-color: #000;
position: relative;
color: #fff !important;
text-decoration: none
}

.article-select a:hover, .article-select a:hover *
{
color: #fff !important;
}

.article-select a b, .article-select a i
{
color: #fff !important;
}

.article-select b
{
display: inline-block;
position: absolute;
bottom: 0;
width: 90%;
margin: 5%;
font-size: .6em;
line-height: .9;
letter-spacing: -2px;
z-index: 1000;
}

.article-select i
{
display: block;
font-family: Arial, sans-serif;
font-size: .5em;
font-style: normal;
font-weight: 600;
letter-spacing: 0;
margin-bottom: .4em;
text-decoration: underline;
}

.article-select .date
{
position: absolute;
font: bold 13px/1.5 Arial, sans-serif;
letter-spacing: 0;
margin: 1em;
text-shadow: 0 0 15px #000;
z-index: 9999;
}

.article-select .excerpt, .article-select .illust-rss
{
display: none;
}

.article-select a:before
{
content: " ";
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
width: 100%;
height: 100%;
position: absolute;
z-index: 500;
}

.article-select a:after
{
content:"";
width: 100%;
height: 100%;
position: absolute;
outline: 8px solid #000;
outline-offset: 5px;
opacity: 0;
-webkit-transition: all 0.15s ease-out; 
-moz-transition: all 0.15s ease-out; 
-o-transition: all 0.15s ease-out; 
transition: all 0.15s ease-out;
}

.article-select a:hover:after, .article-select.hover-effect a:after
{
opacity: 1;
outline-offset: 10px;
}

.article-select .new:after, .article-select .updated:after, .article-select .sneaky:after
{
content: "new";
text-align: right;
position: absolute;
top: 10px;
right: 10px;
font-weight: normal;
font-size: 20px;
letter-spacing: -1px;
background-color: #fff;
padding: 5px 10px;
color: #000;
}

.article-select .new:after
{
content: "new";
}

.article-select .updated:after
{
content: "updated";
}

.article-select .sneaky:after
{
content: "draft";
}

#tag-wrapper
{
width: 75vw;
margin: 2em auto;
}

#tag-wrapper .article-select ul
{
justify-content: center;
width: auto;
margin-bottom: 1em;
}


/* Mobile adaptations */

@media screen and (max-width: 900px)
{

.article-select ul
{
justify-content: center;
}

.article-select li
{
margin-top: .5em;
}

}