main {
  background:var(--color-gray-medium);
}

.tag-nav .container {
  display:flex;
}
.tag-nav {
  margin-bottom:60px;
  font-size:14px;
  background:var(--color-navy);
  user-select: none;
  position:relative;
  z-index:10;
}

.tag-nav hr {
  margin:0;
  background:var(--color-gray-medium);
  height:1px;
  width:100%;
  border:none;
}


.tag-nav .tag:first-child {
  border-left:1px solid var(--color-gray-medium);
}
.tag-nav .tag {
  padding:14px 50px;
  cursor:pointer;
  border-right:1px solid var(--color-gray-medium);
  display: inline-block;
  color: var(--color-gray-medium);
  text-decoration: none;
}
.tag-nav .single-item.active {
  background:var(--color-gray-medium);
}
.tag-nav .single-item:hover {
  background:var(--color-offwhite);
}
.tag-nav .multi-item:hover {
  background:var(--color-offwhite);
}

.tag-nav .tag a{
  text-decoration: none;
  color: var(--color-gray-medium);
}


.tag-nav .multi-item {
  position:relative;
}
.tag-nav .tag-drop {
  position:absolute;
  top:100%;
  left:0;
  background:var(--color-navy);
  min-width:100%;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
  opacity:0;
  pointer-events:none;
}
.tag-nav .tag-drop .tag-item {
  white-space:nowrap;
  display:block;
  padding:12px 0;
  padding:12px 50px;
  border-bottom:1px solid var(--color-gray-medium);
  color:var(--color-medium-gray);
}
.tag-nav .tag .fas {
  font-size: 11px;
  margin-left: 3px;
}
.tag-nav .tag-drop .tag-item:hover {
  background:var(--color-offwhite);
}
.tag-nav .tag-drop .tag-item.active {
  color:var(--color-black);
}

.tag-nav .multi-item.active .tag-drop {
  opacity:1;
  pointer-events:all;
}


.article-list {
  position:relative;
  transition: height 0.2s ease;
}
.article-list:before {
  content:' ';
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:4;
  background:white;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.4s ease;
}
.article-list.loading {
  min-height:50vh;
  overflow:hidden;
}
.article-list.loading:before {
  opacity:1;
  pointer-events:none;
}


.article-list article {
  margin-bottom:20px;
  position:relative;
  background-color: white;
  transition: background-color .3s linear;
}
.article-list article:hover {
  background-color: var(--color-navy);
}

.article-list article:hover a div.meta{
  color: white;
}
.article-list article:hover a div.meta em.button{
  color: white;
}

.article-list article a{
  text-decoration: none;
}
.article-list article .meta {
  display:flex;
  white-space:nowrap;
  align-items: center;
  padding-top:12px;
  color:black;
  padding: 20px;
  text-decoration: none;
}
.article-list article .meta em.button {
  text-decoration: none;
  font-style: normal;
  font-size:12px;
  color:var(--color-black);
  margin-left: auto;
}

.article-list article .meta *{
  text-decoration: none;
  color: black;
}
.article-list article .meta hr {
  margin:0;
  background:var(--color-gray-medium);
  height:1px;
  width:100%;
  border:none;
  margin-right: 20px;
  margin-left: 20px;
}

.article-list article figure {
  position:relative;
  aspect-ratio:1.5/1;
}

.article-list article .avail-notice {
  position: absolute;
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  bottom: 0;
}
.article-list article .avail-notice span {
  background: rgba(255,255,255,0.6);
  text-orientation: upright;
  writing-mode: vertical-rl;
  padding: 12px;
  font-size: 12px;
  letter-spacing: 5px;
}

.article-list article a figure img{
  object-fit:cover;
  width:100%;
  height:100%;
}


@media screen and (max-width:980px) {
  .article-list.grid > article {
    grid-column: span 12;
  }

  .tag-nav .tag {
    padding: 14px 16px;
    display: flex;
    white-space:nowrap;
    display:inline-block;
  }
  .tag-nav .tag.style{
    border-left: 1px solid var(--color-gray-medium);
  }

  .tag-nav .tag span{
    margin-top: auto;
    margin-bottom: auto;
  }
}