document.addEventListener('DOMContentLoaded', function(event) { var body = document.querySelector("body"); var styleTag = document.createElement("style"); styleTag.innerHTML = "#vfw-events-container {\n --item-spacing: 1.5%;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-content: flex-start;\n padding: var(--item-spacing);\n}\n\n.vfw-event, .vfw-item {\n flex: 1 2 30%;\n margin: var(--item-spacing);\n min-width: 260px;\n max-width: 320px;\n}\n\n.vfw-event {\n font-family: sans-serif;\n}\n\n.vfw-event-image {\n width: 100%;\n height: auto;\n object-fit: cover;\n object-position: center center;\n}\n\n.vfw-event-title {\n font-size: 1.2rem;\n margin: 0.25rem 0;\n}\n\n.vfw-event-link {\n color: #6388CA;\n text-decoration: none;\n}\n\n.vfw-event-content {\n text-overflow: ellipsis;\n /* Required for text-overflow to do anything */\n white-space: nowrap;\n overflow: auto;\n width: 100%;\n height: 1.2rem;\n}\n\n.vfw-event-detail {\n margin-top: 0.25rem;\n font-size: 0.8rem;\n color: #444;\n}\n"; body.appendChild(styleTag); // Add the events to the widget container var HTML = "
\"Event<\/a>

Lochaber Live<\/a><\/h3>