.future .card {
	/* each card card */
	/* layout */
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin: 0 0.5vw;
}

.future .cards {
	flex: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
}

.future .card-title .separator {
	margin: 0 1vw;
}

.future .card-title .day,
.future .card-title .separator,
.future .card-title .date {
	display: inline-block;
}
.future .card-info-icon {
	grid-column: 1/5;
}

@media screen and (max-width: 1020px) {
	.future .card-info {
		grid-template-columns: repeat(3, auto);
		grid-template-rows: repeat(9, auto);
		column-gap: 0.5vw;
		row-gap: 0;
	}
	.future .card-info-icon {
		grid-column: 1/4;
	}
	.future .card-info-panel-icon {
		text-align: right;
	}
	.future .card-info-panel-label {
		text-align: right;
	}
	.future .card-info-panel-graphical {
		align-self: flex-start;
		justify-self: center;
		margin-top: 1vh;
		text-align: center;
		grid-column: 1/4;
	}
	.future .card-info-panel-numerical,
	.future .card-info-panel-label,
	.future .card-info-panel-icon {
		align-self: flex-end;
	}
}

@media screen and (max-width: 576px) {
	.future .card-title {
		flex-direction: column;
	}

	.future .card-title .separator {
		display: none;
	}
	.future .card {
		margin: 0 2px;
	}
	.future .card-info {
		grid-template-columns: repeat(2, auto);
		grid-template-rows: repeat(9, auto);
		column-gap: 0.5vw;
		row-gap: 0;
	}
	.future .card-info-icon {
		grid-column: 1/3;
	}
	.future .card-info-panel-icon {
		display: none;
	}
	.future .card-info-panel-label {
		text-align: left;
	}
	.future .card-info-panel-graphical {
		align-self: flex-start;
		justify-self: center;
		margin-top: 1vh;
		text-align: center;
		grid-column: 1/3;
	}
	.future .card-info-panel-numerical,
	.future .card-info-panel-label,
	.future .card-info-panel-icon {
		align-self: flex-end;
	}
}

@media screen and (max-width: 400px) {
	.future .card-info-panel-graphical {
		display: none;
	}
	.future .card-info {
		grid-template-columns: repeat(1, auto);
		grid-template-rows: repeat(9, auto);
		column-gap: 0.5vw;
		row-gap: 0;
		text-align: center;
	}
	.future .card-info-icon {
		grid-column: 1/2;
	}
	.future .card-info-panel-numerical {
		align-self: flex-start;
	}
	.future .card-info-panel-label {
		text-align: center;
	}
}