/* Scroller container styling */
.scroller[data-animation="true"] {
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }
  
  /* Inner scroller element styling */
  .scroller[data-animation="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll 
      var(--_animation-duration, 40s)
      var(--_animation-direction, forwards)
      linear 
      infinite;
  }
  
  /* Reverse animation direction when data-direction="right" */
  .scroller[data-direction="right"] {
    --_animation-direction: reverse;
  }
  
  /* Fast speed setting */
  .scroller[data-speed="fast"] {
    --_animation-duration: 10s;
  }
  
  /* Slow speed setting */
  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }
  
  /* General styling for the inner scroller */
  .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  /* Keyframes for scrolling animation */
  @keyframes scroll {
    to {
      transform: translateX(calc(-50% - 0.5rem));
    }
  }
  
  /* Comment container styling */
  .comment {
    max-width: 30rem;
    display: flex;
    gap: 1rem;
  }

  @media (max-width: 787px) {
    .comment {
      max-width: 18rem;
    }
  }
  
  /* Profile picture styling */
  .profile-pic {
    height: 20%;
    border-radius: 50%;
  }
  
  /* Comment background styling */
  .comment-background {
    background-color: #f0f2f5;
    border-radius: 1rem;
    padding: 0.5rem;
  }
  
  /* Username styling */
  .username {
    font-weight: bold;
    font-size: 0.8125rem; 
    color: #070707;
  }
  
  /* Comment text section styling */
  .comment-section {
    margin: 0;
    padding-inline: 0.125rem;
    font-size: 1.25rem; 
    line-height: 1.5;
  }
  
  /* Comment actions styling */
  .comment-actions {
    font-size: 0.75rem; 
    color: #65676B;
    font-weight: bold;
    margin-left: 0.5rem;
    margin-top: 0.5rem;
  }

 
  
  /* Span element inside comment actions */
  .comment-actions span {
    padding-right: 0.5rem;
  }
  
  /* Like image and number container styling */
  .like-img {
    display: -webkit-inline-box;
    float: right;
    width: 1.125rem; 
    gap: 0.5rem;
    margin-right: 1.5rem;
  }
  
  /* Like number styling */
  .like-nmb {
    display: table-row;
  }