.tile-column-list {
	row-gap: 2rem;
	margin: 2rem 0;

	max-width: 80vw;
}

.tile-column-list .tile {
	height: min-content;
	min-height: 15rem;

	column-gap: 5vw;

	align-items: center;
}

.tile {
	display: flex;
	flex-flow: row nowrap;
}

.tile .info {
	text-align: center;
}

.tile .info .title {
	color: var(--color-green);
	font-size: 2rem;
}

.tile .info .description {
	font-size: 1.4rem;
}

.tile .img {
	display: inline-block;

	flex-basis: 40%;
	flex-shrink: 0;

	min-width: 0;
	width: 40%;

	height: 100%;

	background-position: center;
	background-size: cover;

	border-radius: 10px;
}

#info1, #info2 {
	color: var(--color-green);
}

#info2 p {
	color: black;

	margin-bottom: 2rem;

	text-align: center;
}

#info2 strong {
	color: var(--color-green);
}

#image4 {
	display: block;

	border-radius: 10px;
	
	max-width: 76rem;
	height: 30rem;

	margin: 2rem;

	background-size: cover;
	background-position: center;
}

.decorated .decoration-line {
	background-color: var(--color-green);
	max-width: 15vw;
}

@media screen and (width < 1140px)
{
	.tile-column-list {
		width: 100%;
		max-width: unset;
	}

	.tile-column-list .tile {
		height: auto;

		row-gap: 1rem;
	}

	.tile {
		flex-flow: column nowrap;
	}

	.tile .info {
		text-align: left;
	}

	.tile .img {
		flex-basis: unset;
		flex-shrink: 0;

		height: 15rem;
		width: 100%;

		order: 2 !important;
	}

	#info1 ul {
		margin-top: 1rem;
	}

	#info2 p {
		text-align: left;
		padding: 0 2vw;
	}

	#image4 {
		height: 17rem;
		max-width: unset;
		width: 100%;

		background-position: top 50% left 10%;
	}

	.decorated .decoration-line {
		max-width: 15vw;
	}
}