/* 3.4 - Event - Start
================================================== */
.popular_event_section {
	margin-bottom: 20px;
	.section_heading {
		padding-right: 100px;
	}

	.shape_img_1 {
		top: -136px;
		left: -120px;
		max-width: 270px;
	}
	.shape_img_2 {
		left: 44%;
		bottom: -46px;
		max-width: 270px;
	}
	.shape_img_3 {
		top: 40%;
		right: -196px;
		max-width: 386px;
	}
}

.popular_event_list {
	padding: 40px;
	margin-bottom: -140px;
	border-radius: $border_radius;
	background-color: $color_white;
	box-shadow: 2px 2px 30px rgba(31, 29, 13, 0.09), 10px 10px 0 0 $color_warning;
	.wrap_title {
		font-size: 28px;
		line-height: 32px;
		margin-bottom: 30px;
	}

	ul {
		>li {
			display: flex;
			color: $color_dark;
			font-family: $font_heading;
			&:not(:last-child) {
				margin-bottom: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid $color_border;
			}
		}

		.column {
			&:nth-child(1) {
				flex: 0 0 100px;
				padding-right: 20px;
			}
		}

		.day {
			display: block;
			font-size: 28px;
			font-weight: 700;
			line-height: 32px;
		}
		.month {
			display: block;
			font-size: 13px;
			font-weight: 500;
			line-height: 16px;
			padding: 5px 0 9px;
			text-transform: uppercase;
		}
		.time {
			display: block;
			font-size: 18px;
			font-weight: 600;
			line-height: 24px;
		}
		.event_title {
			font-size: 22px;
			line-height: 25px;
			margin-bottom: 12px;
		}
		.event_name {
			color: #444444;
			font-size: 16px;
			line-height: 24px;
			font-family: $font_body;
			strong {
				font-weight: 500;
			}
			small {
				font-size: 16px;
			}
		}
	}
}

.event_card {
	overflow: hidden;
	border-radius: $border_radius;
	background-color: $color_white;
	border: 2px solid $color_border;
	transition: $transition;
	&:hover {
		border-color: $color_dark;
		transform: translate(-2px, -2px);
		box-shadow: 10px 10px 0 0 $color_dark;
	}
	.item_image {
		display: block;
		overflow: hidden;
	}
	.item_content {
		padding: 30px;
	}
	.item_title {
		font-size: 22px;
		line-height: 25px;
		margin-bottom: 20px;
		>a {
			color: $color_dark;
			&:hover {
				text-decoration: underline;
				text-decoration-thickness: 1px;
			}
		}
	}
	.meta_info_list {
		>li {
			font-size: 16px;
			font-weight: 500;
			line-height: 24px;
			color: $color_dark;
		}
	}
}
/* 3.4 - Event - End
================================================== */