/* Mobile View */
@media screen and (max-width: 79.5rem){

.tag:first-of-type{
margin:.5rem 0 .5rem 0;
padding:.5rem 0 0 0;
border-top:var(--light-border-color) 1px solid;
}

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

.tag:first-of-type{
margin:.5rem 0 .5rem 0;
padding:.5rem 0 0 0;
}

}

.tag{
float:left;
display:block;
}

.tag p,
.tag ul{
font-size:var(--fs-s);
font-weight:bold;
margin:0;
padding:0;
}

.tag p{
float:left;
width:auto;
margin:0 .5rem 0 0;
display:inline;
}


.tag ul{
display:flex;
justify-content:space-around;
list-style-type:none;
width:auto;
margin:0;
padding:0;
}

.tag li{
float:left;
text-align:left;
margin:0;
padding:0;
width:auto;
position:relative;
}

.tag li:before{
display:none;
}

.tag .label{
display:inline-block;
margin:.1rem 0 0 0;
padding:0;
}

.tag a{
display:inline-block;
border-radius:.5rem;
background:var(--bgr-gray-500);
}

/* Mobile View */
@media screen and (max-width: 79.5rem){

.tag a{
margin:0 .25rem .5rem 0;
padding:.15rem .35rem 0 .35rem;
}

}

/* Desktop View */
@media screen and (min-width: 79.5rem){

.tag a{
margin:0 .25rem .5rem 0;
padding:.15rem .35rem .1rem .35rem;
}

}

.tag a:first-of-type{
margin:0 .25rem .5rem 0;
}

.tag a:hover{
background:var(--bgr-gray-600);
}

/* Desktop View */
@media screen and (min-width: 79.5rem){

.tag:last-of-type{
}

.tag .label{
text-transform:uppercase;
width:auto;
}

.tag a{
padding:0 .35rem;
}

.tag a{
border:var(--bgr-gray-500) 1px solid;
}

.tag a:hover{
border:var(--bgr-gray-600) 1px solid;
}

}