/* Interline Trips — listing. Matches the old Toolset "trips-view" styles. */

.trips-list {
	margin: 0 0 2em;
}

.trips-list .trip-row {
	display: flex;
	width: 100%;
}

.trips-list .single-trip {
	box-sizing: content-box;
	width: calc(100% / var(--trip-cols, 2) - 2%);
	padding: 1%;
}

.trips-list .single-trip-image-link {
	display: block;
}

.trips-list .single-trip-image {
	display: block;
	clear: both;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.trips-list .single-trip-title {
	margin: 0.6em 0 0;
	font-size: 1.1em;
	line-height: 1.35;
}

.trips-list .trip-info {
	display: flex;
	align-items: center;
	width: 100%;
	margin: 32px 0;
}

.trips-list .trip-info .element1,
.trips-list .trip-info .element2 {
	width: 50%;
}

.trips-list .trip-info .element2 {
	text-align: right;
}

.trips-list .trip-info .element2 span {
	font-weight: 600;
	color: #000000;
}

.trips-list .trip-info .element1 a {
	display: inline-block;
	padding: 8px;
	border-radius: 10px;
	background: #000000;
	color: #e8554e;
	text-decoration: none;
}

.trips-list .trip-info .element1 a:hover,
.trips-list .trip-info .element1 a:focus {
	background: #e8554e;
	color: #000000;
}

/* Phones: one trip per row. */
@media (max-width: 600px) {
	.trips-list .trip-row {
		flex-wrap: wrap;
	}

	.trips-list .single-trip {
		width: 98%;
	}
}