/* === CARDS LAYOUT === */
#cardsContainer {
  max-width: 900px;
  margin: 0 auto;
  column-count: 2;
  column-gap: 15px;

}

@media (max-width: 700px) {
  #cardsContainer {
    column-count: 1;
  }
}

.card {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid #ccc;
  background:   var(--bg-light);;
  padding: 15px;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 20px;
  flex: 0 0 calc(50% - 7.5px);
}

.card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}





.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.pub-image {

 display: flex; 
 justify-content: center; 
 align-items: center;
   align-items: center;
}

.pub-image img {
 
  width: 100%;
  max-height: 40px;
  height: auto;
}


.card p a {
    text-decoration: none;
    color: var(--secondary);
}




.card-content {
  flex: 1;
}

.card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1;
}

h2 {
 margin-bottom: 20px;
}

.video-container {
  position: relative;
  width: 100%;              /* Fill the parent div width */
  max-width: 600px;         /* Optional: limit max width */
  height: 0;
  padding-bottom: 56.25%;   /* 16:9 aspect ratio (9/16 = 0.5625) */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}