.travel-primaryFields {
	display: grid;
	width: 100%;
	grid-template-columns:
		[full-start] minmax(0, 1fr) [value-end] minmax(0, 25px) [center] minmax(0, 25px) [value-start] minmax(
			0,
			1fr
		)
		[full-end];
	grid-template-rows: [label-line-start] minmax(0, 14px) [value-line-start] minmax(0, 35px) [lines-end];

	& > .empty-field {
		grid-row: ~"1 / 3";

		/**
		 * If we have at least one placeholder,
		 * we align the icon in the real grid
		 * center and not in the bottom center
		 */
		& + .icon,
		& ~ .icon {
			grid-row: ~"1 / 3";
		}

		&:first-child {
			border-top-left-radius: 2px;
			border-bottom-left-radius: 2px;
		}

		&:last-child {
			border-top-right-radius: 2px;
			border-bottom-right-radius: 2px;
		}
	}

	& > .label {
		grid-column: ~"auto / span 2";
		grid-row: ~"1 / 1";
	}

	& > .value {
		grid-column: ~"auto / span 1";
		grid-row: ~"2 / 2";

		line-height: 22pt;
		font-size: 23pt;
		flex: 0 0 100px;

		&:first-child {
			margin-right: 10px;
		}

		&:last-child {
			margin-left: 10px;
			text-align: end !important;
		}
	}

	& > .icon {
		grid-row: ~"2 / 2";
		grid-column: ~"2 / 4";
		justify-self: center;
		align-self: center;
	}
}
