#onDemandVideoViewer {
width: 100%;
height: 600px;
} .webinar-block-container {
display: flex;
flex-wrap: wrap;
gap: 20px; text-align: left;
} .webinar-block {
flex: 1 1 calc(33.333% - 20px); box-sizing: border-box;
display: flex;
flex-direction: column;
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} .webinar-block-image img {
width: 100%;
height: auto;
} .webinar-block-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
} .webinar-block-title {
font-size: 1.5em;
margin: 10px 0;
}
.webinar-block-date {
font-size: 0.9em;
color: #999;
}
.webinar-block-description {
flex: 1;
margin: 10px 0;
}
.webinar-block-link {
align-self: flex-start;
background-color: #0073aa;
color: #fff;
padding: 10px 15px;
text-decoration: none;
border-radius: 3px;
transition: background-color 0.3s;
}
.webinar-block-link:hover {
background-color: #005177;
}
.webinar-block-image {
height: 270px;
align-content: center;
}
@media (max-width: 768px) {
.webinar-block {
flex: 1 1 100%;
}
}