:root {
  --main-width: 1200px;
}

.hide { display: none !important; }

@media (max-width: 1200px) {
  .main-body { padding: 0 20px; }
}

.main-body-content {
  max-width: var(--main-width);
  margin: 0 auto;
  padding-top: 0;
}

.events { margin-top: 80px; }
.event + .event { margin-top: 12px; }
.event-container { position: relative; display: grid; grid-template-columns: 240px 1fr; }
.event-feature-image { background-size: cover; background-position: 50% 50%; border-radius: 12px 0 0 12px; }

.event-content {
  padding: 20px 20px 20px 24px;
  background: hsl(0 0% 99%);
  border: 1px solid hsl(0deg 0% 55%);
  border-radius: 0 12px 12px 0;
}

.event header { margin-bottom: 6px; font-weight: bold; }

.event-info {
  position: relative;
  display: grid; grid-template-columns: 140px 1fr; grid-gap: 4px 10px;
  font-size: 16px; line-height: 21px;
}

.event-info > div:nth-child(odd) { text-align: right; color: hsl(0 0% 55%); }

@media (max-width: 700px) {
  .event + .event { margin-top: 16px; }
  .event-container { grid-template-columns: 1fr; }
  .event-feature-image { height: 160px; border-radius: 12px 12px 0 0; }
  .event-content { padding: 16px 16px; border-radius: 0 0 12px 12px; }
  .event header { margin-bottom: 14px; }
  .event-info { grid-template-columns: 1fr; grid-gap: 0 0; }
  .event-info > div:nth-child(odd) { text-align: left; }
  .event-info > div:nth-child(even) { margin-bottom: 8px; }
}

.stream {
  margin-top: 40px;
}

.iframe-container {
  position: relative;
  width: 100%; height: 0;
  padding-bottom: 56.25%;
}

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