The number of elements per row is something you can change by simple CSS. There is not configuration option because with css you can use Media Queries to adjust the tiles based on the current view port.

A simple css definition would look like this. It will give you 4 item per row.

div#events .item-container {
	width: 25%
}

You can even use media queries to adapt the number of tiles per row based on the current view port.

div#events .item-container {
	width: 33.3333333333%;
}


@media (max-width: 900px) {
	div#events .item-container {
		width: 50%;
	}
}

@media (max-width: 450px) {
	div#events .item-container {
		width: 100%;
	}
}

While the styles above work for the grid view, the code below works for the tile view:

div.eventgallery-tiles-list .eventgallery-tile {
    width: 25%;
}

If you want to change the color of the text on a Events List you can try to start with this selector.

div#events .item .data a,
div#events .item .data a:hover,
div#events .item .data a:active {
	color: green;
}

To target the background color of the data part on a tile you can start with this:

div#events .item .content:hover .data {
	background-color: rgba(0,0,0,0.9);
	opacity: 1;
	color: #EEE;
}

Make sure you’re doing those changes in the CSS file of your template. Don’t modify the components files since you’ll loose those changes with every update.