#comments {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
}

#comnt-wrapper {
   position: relative;
}

#com-backgnd {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('../../images/banner/meowmate_back.png');
   filter: blur(3px);
   opacity: 0.4;
   background-repeat: repeat-y;
   background-size: contain;
   background-position: center;
   z-index: -1;
}

#comment-container {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   padding: 3rem 5rem;
   gap: 2vw;
   width: 100%;
}

.cmnt-box {
   box-shadow: 2px 2px 30px rgba(0, 0, 0, .1);
   padding: 1.6rem;
   margin: 15px;
   cursor: pointer;
   transition: all ease 0.3s;
   background-color: white;
   border-radius: 5px;
}

.cmnt-box:nth-child(4n+1) {
   rotate: -8deg;
}

.cmnt-box:nth-child(4n+3) {
   rotate: 5deg;
}

.cmnt-box:nth-child(4n+4) {
   rotate: -9deg;
}

.profile-img {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   overflow: hidden;
   margin-right: 10px;
}

.profile-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.profile {
   display: flex;
   align-items: center;
}

.name-user h4 {
   color: var(--txt-col2);
   font-family: var(--heading2);
   font-size: 1.4rem;
}

.user-comment {
   font-size: 0.9rem;
}

.cmnt-box:hover {
   transform: translateY(-10px);
}

@media only screen and (max-width: 799px) {
   #comment-container {
      padding: 2rem;
   }
}

@media only screen and (max-width: 563px) {
   #comment-container {
      grid-template-columns: 1fr;
   }
}