.tm-grid-group {
	display: flex;

	.tm-box-icon,
	.tm-pricing {
		height: 100%;
		margin-bottom: 0;
	}

	.tm-grid {
		width: 100%;
		max-width: 100%;
	}

	.grid-item {
		width: 100%;
	}

	&.style-border,
	&.style-border-02 {
		overflow: hidden;

		.grid-item {
			&:after {
				position: absolute;
				content: '';
				right: -15px;
				top: 0;
				bottom: 0;
				background: #ededed;
				width: 1px;
			}

			&:last-child {
				&:after {
					display: none;
				}
			}
		}
	}

	&.style-short-separator {
		overflow: hidden;

		.grid-item {
			&:after {
				position: absolute;
				content: '';
				right: -15px;
				top: 50%;
				transform: translateY(-50%);
				height: 100px;
				background: #d1d9df;
				width: 1px;
			}

			&:last-child {
				&:after {
					display: none;
				}
			}
		}
	}

	&.style-border-02 {
		.grid-item {
			&:after {
				background: rgba(46, 50, 138, .1);
			}
		}
	}

	&.style-border-03,
	&.style-border-04 {

		overflow-y: hidden;

		.modern-grid {
			grid-gap: 0 !important;
			border-right: 1px solid #ededed;
		}

		.grid-item {
			padding-top: 100px;
			padding-bottom: 100px;

			&:before {
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				bottom: 0;
				background: #ededed;
				width: 1px;
			}

			&:after {
				position: absolute;
				content: '';
				top: -1px;
				left: 0;
				right: 0;
				background: #ededed;
				height: 1px;
			}
		}
	}

	&.style-border-03 {
		.grid-item {
			position: relative;
		}
	}

	&.style-border-04 {
		.grid-item {
			padding-top: 25px;
			padding-bottom: 25px;
		}
	}

	&.style-border-rounded {
		.tm-grid {
			border: 1px solid rgba(238, 238, 238, .17);
			border-radius: 10px;
			overflow: hidden;
		}

		.grid-item {
			&:after {
				position: absolute;
				content: '';
				left: -1px;
				top: -1px;
				right: -1px;
				bottom: -1px;
				border: 1px solid rgba(238, 238, 238, .17);
				pointer-events: none;
			}
		}
	}

	&.style-rounded {
		border-radius: 10px;
		overflow: hidden;
	}

	&.style-modern-metro-3-columns {
		.modern-grid {
			grid-template-columns: repeat(12, 1fr);
		}

		.grid-item {
			grid-column: span 12;
		}
	}

	&.style-dashed-inner {
		.tm-grid {
			position: relative;

			&:before {
				position: absolute;
				content: '';
				left: 0;
				top: 0;
				bottom: 0;
				width: 1px;

				background-image: linear-gradient(to bottom, #ccc 58.33333%, rgba(0, 0, 0, 0) 0%);
				background-position: left top;
				background-size: 100% 8px;
				background-repeat: repeat-y;
			}

			&:after {
				position: absolute;
				content: '';
				right: 0;
				left: 0;
				top: 0;
				height: 1px;

				background-image: linear-gradient(to right, #ccc 58.33333%, rgba(0, 0, 0, 0) 0%);
				background-position: left bottom;
				background-size: 8px 100%;
				background-repeat: repeat-x;
			}
		}

		.grid-item {

			&:hover {
				z-index: 1;
			}

			&:before {
				position: absolute;
				content: '';
				right: 0;
				top: 0;
				bottom: 0;
				width: 1px;

				background-image: linear-gradient(to bottom, #ccc 58.33333%, rgba(0, 0, 0, 0) 0%);
				background-position: left top;
				background-size: 100% 8px;
				background-repeat: repeat-y;
			}

			&:after {
				position: absolute;
				content: '';
				right: 0;
				left: 0;
				bottom: -1px;
				height: 1px;

				background-image: linear-gradient(to right, #ccc 58.33333%, rgba(0, 0, 0, 0) 0%);
				background-position: left bottom;
				background-size: 8px 100%;
				background-repeat: repeat-x;
			}
		}
	}
}

@include media-breakpoint-up(md) {
	.tm-grid-group {
		&.style-modern-metro-3-columns {
			.grid-item {
				grid-column: span 6;

				&:nth-child(6n + 1),
				&:nth-child(6n + 3) {
					grid-column: span 6;
				}

				&:nth-child(6n + 2) {
					grid-column: span 6;
				}
			}
		}
	}
}

@include media-breakpoint-up(xl) {
	.tm-grid-group {
		&.style-modern-metro-3-columns {
			.grid-item {
				grid-column: span 4;

				&:nth-child(6n + 1),
				&:nth-child(6n + 3) {
					grid-column: span 3;
				}

				&:nth-child(6n + 2) {
					grid-column: span 6;
				}
			}
		}
	}
}