.gme-webinars {
   --primary-color: #0066cc;
   --text-color: #333333;
   --bg-color: #ffffff;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1rem;
   max-width: 1200px;
   margin: 1rem auto;
   padding: 0 1rem;
}

.webinar-item {
   background: var(--bg-color);
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   overflow: hidden;
}

.webinar-date {
   background: var(--primary-color);
   color: white;
   padding: 0.75rem;
   text-align: center;
}

.webinar-date .day {
   font-size: 1.5em;
   font-weight: bold;
}

.webinar-content {
   padding: 1rem;
}

.webinar-content h3 {
   margin: 0 0 0.5rem 0;
   color: var(--text-color);
   font-size: 1.2em;
}

.webinar-time {
   color: #666;
   font-size: 0.9em;
   margin-bottom: 0.75rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.webinar-description {
   font-size: 0.95em;
   line-height: 1.5;
   margin-bottom: 1rem;
}

.register-button {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   background: var(--button-bg-color);
   color: var(--button-text-color) !important;
   padding: 0.5rem 1rem;
   border-radius: 4px;
   text-decoration: none !important;
   font-size: 0.9em;
}

.register-button:hover {
   filter: brightness(90%);
}

.register-button svg {
   stroke: var(--button-text-color) !important;
}

.webinar-item.past {
   opacity: 0.6;
}

.webinar-item.past .register-button {
   pointer-events: none;
   opacity: 0.5;
   cursor: not-allowed;
}

@media (max-width: 768px) {
   .gme-webinars {
       grid-template-columns: 1fr;
   }
}