<style>

/* General layout for namebox */
.namebox-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px;
  position: relative;
}

/* Sidebar for news items */
.news-sidebar {
  flex: 1 1 400px; /* Sidebar width */
  background-color: #fffff;
  padding: 20px;
  border-radius: 8px;
  position: fixed; /* Fix it to the viewport */
  top: 50%; /* Position it vertically in the middle */
  right: 20px; /* Keep it 20px from the right side */
  transform: translateY(-50%); /* Adjust to vertically center the box */

  height: 400px;  /* Set a fixed height */
  overflow-y: auto; /* Make it scrollable when content exceeds height */
  display: block; /* By default, show the sidebar */
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, 
              rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, 
              rgba(255, 255, 255, 0.08) 0px 1px 0px inset; /* New box shadow */
}

/* The card container */
.card {
  font-family: 'Montserrat', sans-serif;
  width: 300px;
  height: 250px;
  translate: -6px -6px;
  background: #0077ad;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 15px;
}

/* Card header */
.head {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 900;
  width: 100%;
  height: 32px;
  background: #ffffff;
  padding: 5px 12px;
  color: #000000;
  border-bottom: 3px solid #000000;
}

/* Card content area */
.content {
  padding: 8px 12px;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
}

/* Button inside card */
.button {
  padding: 5px 10px;
  margin-top: 10px;
  border: 3px solid #000000;
  box-shadow: 3px 3px 0 #000000;
  font-weight: 750;
  background: #4ade80;
  transition: all 0.3s ease;
  cursor: pointer;
}

.button:hover {
  translate: 1.5px 1.5px;
  box-shadow: 1.5px 1.5px 0 #000000;
  background: #1ac2ff;
}

.button:active {
  translate: 3px 3px;
  box-shadow: 0 0 0 #000000;
}

/* Hover effect for card */
.card:hover {
  translate: -6px;
}

/* Hide sidebar for medium and small screens */
@media (max-width: 1493px) {
  .news-sidebar {
    display: none; /* Hide sidebar on medium screens and below */
  }
}

@media (max-width: 768px) {
  .namebox-layout {
    flex-direction: column;
    align-items: center;
  }

  /* Hide sidebar on mobile and tablet */
  .news-sidebar {
    display: none; /* Ensure sidebar is hidden on small screens */
  }

  /* Hide the button as well (you can remove it or leave it depending on preference) */
  .news-toggle-button {
    display: none;
  }
}







</style>