#catodom-content {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   gap: 0.8rem;
   padding: 1rem 3rem;
}

#catodom-content img{
   width: 100%;
   object-fit: cover;
   aspect-ratio: 1/1;
   border: 2.5px solid var(--col1);
   border-radius: 8px;
}

#catodom-content img:nth-child(4n+2) {
   border-color: var(--col2); /* Second color */
}

#catodom-content img:nth-child(4n+3) {
   border-color: var(--col3); /* Third color */
}

#catodom-content img:nth-child(4n+4) {
   border-color: var(--col4); /* Fourth color */
}

.change-content {
   position: fixed;
   height: 100%;
   width: 100%;
   background: rgba(0, 0, 0, 0.454);
   top: 0;
   left: -100%;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
   flex-direction: column;
   color: white;
   transition: all 0.1s ease;
   z-index: 3000;
}

.change-content .chng-img {
   height: 80%;
   width: 45%;
}

.change-content .chng-img > img {
   height: 100%;
   width: 100%;
   object-position: center;
   object-fit: contain;
   filter: drop-shadow(0 0 2px 2px #EBD1BA);
   /* border: 2px solid #EBD1BA; */
   border-radius: 12px;
}

.bx-x {
   position: absolute;
   left: 5%;
   color: white;
   font-size: 2.4rem;
   cursor: pointer;
   border: 0.4px solid white;
   border-radius: 30px;
}

#btn-show {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}