body {
  background-color: 50% grey;
}

img {
  border-radius: 15px;
}

.glass {
  display: block;
  font-size: 1.2em;
  width: 90%;
  max-width: 350px;
  background-color: rgba(180, 180, 180, 0.3);
  border-radius: 15px;
  backdrop-filter: blur(5px);
  padding: 15px 25px;
  margin: 15px auto;
}

.events-grid {
	display: flex;
	gap: 1.5rem;
	margin: 1.5rem 2rem;
	flex-wrap: wrap;
}

.events-grid .col {
	flex: 1 1 25%;
	align-items: center;
	min-width: 200px;
	border: 2px solid #ccc;
	border-radius: 12px;
	padding: 1rem;
	max-width: 20%;
	min-width: 275px;
	font-family: "Roboto", sans-serif;
	background-color:cornflowerblue;
	color: black;
}

.events-grid ul {
	list-style: disc;
	margin: 0;
	padding-left: 1.2rem;
}

.events-grid li + li {
	margin-top: 0.45rem;
}

.topdiv {
  display: block;
  font-size: 1.2em;
  width: 90%;
  max-width: 300px;
  padding: 5px;
  border-radius: 15px;
  margin: 10px auto;
}

.top-panel {
  background: url('images/Dance6.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 1.2em;
  color: white;
  height: 850px;
  z-index: -1;
}

@media (max-width: 800px) {
	.events-grid .col { flex-basis: 50%; }
}

@media (max-width: 480px) {
	.events-grid .col { flex-basis: 100%; }
}