/* ------------------------------ */
/* ------------------------------ */
/* COMMENTS */
.Comments {
   display: grid;
   grid-template-columns: calc(288px * var(--scale)) auto;
   gap: 0px;
   width: 100%;
   min-height: calc(200px * var(--scale));
   overflow: auto;
   background-color: var(--background-c);
   border: calc(1px * var(--scale)) solid var(--border-color);
   border-radius: calc((var(--border-radius-2) * var(--scale)));
}

.Comments .image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: auto;
   aspect-ratio: var(--aspect-ration);
   overflow: visible;
   padding: calc(15px * var(--scale));
}

.Comments .info {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: calc(20px * var(--scale));
   width: 100%;
   min-height: calc(200px * var(--scale));
   overflow: auto;
   padding: calc(25px * var(--scale));
   border-left: calc(1px * var(--scale)) solid var(--background-c);
}

.Comments .name {
   display: block;
   width: 100%;
   height: calc(25px * var(--scale));
   overflow: visible;
   font-size: calc(var(--font-size-5) * var(--scale));
   font-weight: var(--font-weight-4);
}

.Comments .reply-to {
   display: block;
   width: 100%;
   height: calc(15px * var(--scale));
   overflow: visible;
   color: var(--text-color-a);
   font-size: calc(var(--font-size-3) * var(--scale));
   font-weight: var(--font-weight-3);
   opacity: 0.5;
}

.Comments .content {
   display: block;
   width: 100%;
   min-height: calc(80px * var(--scale));
   padding: calc(0px * var(--scale));
   overflow: auto;
   color: var(--text-color-a);
   font-size: calc(var(--font-size-4) * var(--scale));
   font-weight: var(--font-weight-2);
   line-height: 1.5;
}

.Comments .date {
   display: block;
   width: 100%;
   height: calc(10px * var(--scale));
   opacity: 0.5;
   color: var(--text-color-a);
   font-size: calc(var(--font-size-2) * var(--scale));
   font-weight: var(--font-weight-2);
   line-height: 1;
}