.topic-layout {
    position: relative;
    display: block;
    width: 90%;
    margin: 0 auto;
    padding: 10px 0;
}
.layout {
    display: block;
    gap: 2rem;
    width: 100%;
    padding-bottom:10px;
    margin: 0 auto;
}
.topic-layout h1 {
    margin: 20px 0;
    color: #6a6057;
}


.grid{
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 1rem;
  margin-bottom:3rem;
}
.grid-item{
    opacity:0;
    transition:opacity 0.7s ease;
}

.topic-brief a{
    color: #a6a397;
}
.topic-card .topic-photo img{
    min-height: auto;
    max-height: inherit;
}
.topic-card .topic-tag{
    margin:0 !important;
    margin-top:5px !important;
}
.topic-tag span{
    border-radius: 5rem !important;
    border:0 !important;
    padding:0px 6px !important;
    position:absolute;
    right:5px;
    background-color: #a3908b;
    color:#ffffff;
    font-size:12px !important;
    margin-top:5px !important;
}
.topic-photo{
    position: relative;
}
.topic-article{
    max-width: 1280px;
    margin: 0 auto;
    width: 95%;
}
.page-tag{
    width:150px;
    height:150px;
    border: 1px solid #cccccc;
    background-color:#ffffff;

    font-size: 2rem;
    color: #745d44;
    opacity: .5;
    position: fixed;
    top: 40%;
    z-index:99999;
}
.page-tag a{
    color: #745d44 !important;
    display:block;
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}
.page-tag.next{
    right: 0;
    
}

.page-tag.prev{
    left: 0;
}

.page-tag{
  scale:1.05;
  transition: scale ease 0.3s , background-color ease 0.3s;
}
.page-tag:hover{
  scale: 1;
  background-color: #d5d1cd;
}

.btn-back{
    scale:1;
    width: 90%;
    display: block;
    background-color: #756c6663;
    text-align: center;
    color:#333333;
    padding: 1rem;
    margin: 0 auto;
    transition: scale ease 0.3s , background-color ease 0.3s,color ease 0.3s;
}
.btn-back:hover{
  scale: .99;
  color:#ffffff;
  background-color: #453f3a63;
}
#carouselArticlePic .carousel-item{
    height: 300px;
    display: flex;
}
#carouselArticlePic img{
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
}
@media (max-width:1660px) {

    .topic-list{
        column-count: 4;
        column-gap: 30px;
    }

}

@media (max-width:1024px) {

    .topic-list{
        column-count: 3;
        column-gap: 20px;
    }

}

@media (max-width:800px) {

    .topic-list{
        column-count: 2;
        column-gap: 20px;
    }

    .page-tag{

      width:100px;
      height:100px;

    }



}
@media (max-width:500px) {
    .page-tag{

      width:60px;
      height:60px;

    }
    .topic-list{
        column-count: 1;
        column-gap: 20px;
    }

}