.line-pattern {
  display: inline-block;
  width: 100%; /* Make it responsive by default */
  max-width: 100px; /* Set a maximum width for larger screens */
  box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.top-line {
  background-color: #353D41; /* Dark color for the top line */
  height: 5px; /* Thickness of the top line */
  width: 100%; /* Ensure it spans the full width of the parent */
}

.bottom-bar {
  background-color: #FFD700; /* Yellow color for the bottom bar */
  height: 30px; /* Height of the yellow bar */
  width: 100%; /* Ensure it spans the full width of the parent */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .line-pattern {
      max-width: 80px; /* Adjust the width for tablets */
  }

  .top-line {
      height: 4px; /* Slightly reduce thickness */
  }

  .bottom-bar {
      height: 25px; /* Slightly reduce height */
  }
}

@media (max-width: 480px) {
  .line-pattern {
      max-width: 60px; /* Further adjust the width for smaller screens */
  }

  .top-line {
      height: 3px; /* Reduce thickness further */
  }

  .bottom-bar {
      height: 20px; /* Reduce height further */
  }
}