/*! Remove unnecessary comments after review from senior dev !*/

/* importing needed Dave and Busters custom fonts */
@import url('https://use.typekit.net/izg2uwx.css');

/* Start overriding default styles */
.body {
	overflow-y: hidden;
}

.pk-event-list {
	gap: 50px !important;
	margin: 0 auto !important;
	width: fit-content !important;
}

@media only screen and (min-width: 0px) and (max-width: 1200px) {
	.pk-event-list {
		gap: 20px !important;
	}
}

@media only screen and (min-width: 0px) and (max-width: 1000px) {
	.pk-event-list {
		gap: 10px !important;
	}
}

.pk-eachevent {
	font-family: 'franklin-gothic-urw', 'Franklin Gothic Medium', 'Arial Narrow',
		Arial !important;
	min-height: 325px; 
        border-style: solid;
        border-color: black;
	background-color: #ffffff !important;

}

.pk-headline {
	color: #17179A !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 17px !important;
}

/* Selecting all child elements, except the first two which are the card image and title */
.pk-dates,
.pk-times,
.pk-location {
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 15px !important;
	color: #17179A !important;
}

/* Padding for all text elements  */
.pk-dates,
.pk-times,
.pk-location,
.pk-titles {
	padding-top: 0.3em !important;
	box-sizing: border-box !important;
}

/* some of the images seem to be cutoff not showing full text prior to restyling. 
Set object-fit to fill instead, however it might stretch a tad bit */

/* default height for img is already set prior as 300px but changing as it was the only way to set the height of the remaining white space which happens to be the text box */
.pk-image img {
	    object-fit: contain;
            height: 220px !important;
}