.article-grid{
   display: flex;
   gap: 2.5rem;
}

@media (max-width: 768px){
   .article-grid{
      flex-direction: column;
   }
}
/* NAV SECTION */
.article-nav{
   flex: 1;
   font-weight: 300 ;
}

.article-nav p{
   font-weight: 900;
}

.article-nav ul{
   margin-top: 1.5rem;
   transition: all .2s;
   transform-origin: top;
}

.article-nav a{
   display: flex;
   padding: 1rem;
   padding-right: 1.5rem;
   transition: all .2s;
   color: var(--secondary-color);
   border-radius: var(--border-radius);
}

.article-nav a.active{
   background-color: var(--brand-color);
   color: #fff;
   cursor: default;
}

.article-nav a:hover:not(.active){
   text-decoration: underline;
}

.article-nav span:hover{
   text-underline-offset: 2px;
   text-decoration: underline;
   cursor: pointer;
}

.article-nav .show-more{
   color: var(--brand-color);
   margin-top: 1rem;
}

@media (max-width: 768px){
   .article-nav p{
      display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      padding-block: .8rem;
      border-top: 1px solid var(--secondary-border-color);
      border-bottom: 1px solid var(--secondary-border-color);
      cursor: pointer;
   }

   .article-nav p::after{
      content: '';
      width: 1rem;
      background-size: 75%;
      background-position: center;
      background-repeat: no-repeat;
      transition: all .2s;
      transform: rotate(90deg);
   }

   .article-nav.active p::after{
      transform: rotate(270deg);
   }

   .article-nav:not(.active) ul{
      margin-top: 0;
      max-height: 0;
      transform: scaleY(0);
   }
}
/* ARTICLE SECTION */
.article-base{
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
   flex: 3;
}

.article-title{
   font-size: 2rem;
}

.article-votes{
   border-top: 1px solid var(--secondary-border-color);
   border-bottom: 1px solid var(--secondary-border-color);
}

.article-votes-top {
   display: flex;
   align-items: center;
   flex-direction: column;
   padding-block: 2.5rem;
   gap: 1rem;
}

.article-vote {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   border-radius: 3px;
   cursor: pointer;
   transition: all .2s;
   padding-inline: 1rem;
   height: 30px;
   border: 1px solid var(--brand-color);
   color: var(--brand-color);
   background-color: transparent;
}

.article-vote:hover::before,
.article-vote.up.article-voted::before,
.article-vote.down.article-voted::before {
   filter: brightness(0) invert(1);
}

.article-voted,
.article-vote:hover {
   background-color: var(--brand-color);
   color: #fff;
}

.return-top{
   display: none;
   justify-content: space-between;
   cursor: pointer;
   font-size: .9rem;
   padding-block: 1rem;
   width: 100%;
   border-top: 1px solid var(--secondary-border-color);
}

.return-top::after{
   content: '';
   width: 1rem;
   background-size: 75%;
   background-position: center;
   background-repeat: no-repeat;
   transition: all .2s;
   transform: rotate(270deg);
}

@media (max-width: 425px){
   .return-top{
      display: flex;
   }
}

/* ARTICLE RELATED */
.article-relatives{
   display: flex;
   gap: 2rem;
   flex-wrap: wrap;
}

.article-relatives section{
   margin: 0;
   padding: 0;
   flex: 1;
   min-width: 260px;
}

.article-relatives h2{
   font-size: .9rem;
   margin-bottom: .5rem;
}

.article-relatives li{
   padding-block: .5rem;
}

.article-relatives a{
   color: var(--brand-color);
   font-size: .9rem;
}

.article-relatives a:hover{
   text-decoration: underline;
}