.tmpl-champion {
	&__banner {
		min-height: 360px;
		h1 {
			font-size: 48px;
			line-height: 60px;
		}
		@include media-min($medium) {
			h1 {
				font-size: 52px;
				line-height: 90px;
			}
		}
		@include media-min($large) {
			h1 {
				font-size: 72px;
			}
		}
	}
	&__step {
		.block-icon-grid__item-container {
			gap: 0;
		}
		.block-icon-grid__item {
			position: relative;
			padding-left: 12px;
			border-left: 1px solid #5d6974;
			&:before {
				content: "";
				width: 12px;
				height: 12px;
				display: block;
				background: #1aa8a8;
				border-radius: 50%;
				position: absolute;
				left: -6px;
				top: 0;
			}
			&:nth-of-type(1) {
				&::before {
					content: "";
					left: -6px;
					top: -6px;
				}
				@include media-min($medium) {
					padding-top: 32px;
					&::before {
						content: "";
						left: 0;
					}
				}
			}
			&:nth-of-type(2) {
				padding-top: 32px;
				&::before {
					content: "";
					background-color: #9e4ec4;
					top: 32px;
				}
				@include media-min($medium) {
					padding-left: var(--grid-column-gutter);
					&::before {
						content: "";
						top: -6px;
						left: var(--grid-column-gutter);
					}
				}
			}
			&:nth-of-type(3) {
				position: relative;
				padding-top: 32px;
				&::before {
					content: "";
					background-color: #dc150b;
					left: -6px;
					top: 32px;
				}
				@include media-min($medium) {
					margin-top: var(--grid-column-gutter);
					&::before {
						content: "";
						top: -6px;
					}
				}
				@include media-min($large) {
					margin-top: 0;
					padding-left: var(--grid-column-gutter);
					&::before {
						content: "";
						left: var(--grid-column-gutter);
					}
				}
			}
			&:nth-of-type(4) {
				padding-top: 32px;
				&::before {
					content: "";
					background-color: #2c80ce;
					top: 32px;
				}
				@include media-min($medium) {
					margin-top: var(--grid-column-gutter);
					padding-left: var(--grid-column-gutter);
					&::before {
						content: "";
						top: -6px;
						left: var(--grid-column-gutter);
					}
				}
				@include media-min($large) {
					margin-top: 0;
				}
			}
			&:last-child {
				&::after {
					content: "";
					content: "";
					width: 0;
					height: 0;
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-top: 8px solid #fff;
					position: absolute;
					left: -4px;
					bottom: 0px;
				}
				@include media-min($medium) {
					&::after {
						content: "";
						width: 0;
						height: 0;
						border-top: 4px solid transparent;
						border-bottom: 4px solid transparent;
						border-left: 8px solid #fff;
						right: -6px;
						bottom: unset;
						left: unset;
						top: -4px;
					}
				}
			}

			@include media-min($medium) {
				border-left: none;
				padding-left: 0;
				border-top: 1px solid #5d6974;
				padding-top: 12px;
			}
		}
	}
}