.tmpl-compare {
	&__logos {
		.block-logos__logo {
			padding: 0;
			padding-bottom: 24px;
			@include media-min($medium) {
				margin-left: 36px;
			}
		}
		.block-logos__logo-grid {
			display: flex;
			align-items: center;
			gap: 32px;
			flex-wrap: wrap;
			@include media-min($medium) {
				gap: 64px;
			}
			@include media-min($large) {
			}
		}
	}
	&__gartner {
		.gartner {
			margin-top: 36px;
			display: flex;
			align-items: center;
			flex-direction: column;
			@include media-min($medium) {
				padding: 0 32px;
			}
			@include media-min(800px) {
				flex-direction: row;
			}

			img {
				margin-right: 30px;
				flex: 1;
				max-width: 136px;
			}
			.content {
				display: flex;
				flex-direction: column;
				gap: 16px;
				@include media-min(800px) {
					border-left: 1px solid #28333e;
					padding-left: 60px;
					flex: 1;
				}
				@include media-min($large) {
					flex-direction: row;
					gap: 24px;
				}
			}
			.widget-container {
				max-width: 530px;
				flex: 2;
				[id^="gartner-pi-widget"][data-size="line"] {
					max-width: 530px;
				}
			}
			.desc {
				flex: 1;
				color: #fff;
			}
		}
	}
	&__table {
		.table {
			display: flex;
			margin-bottom: 40px;
			@include media-min($medium) {
				margin-bottom: 64px;
			}
			.col {
				flex: 1;
				background-color: transparent;
				border: 1px solid #28333e;
				& + .col {
					border-left: none;
				}
				div {
					height: 76px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					& + div {
						border-top: 1px solid #28333e;
					}
					&:nth-of-type(1) {
						height: 54px;
						background-color: #28333e99;
						font-weight: 700;
						font-size: 20px;
					}
				}
				&:nth-of-type(1) {
					div {
						justify-content: flex-start;
						padding-left: 10px;
						@include media-min($medium) {
							padding-left: 30px;
						}
					}
				}
				&:nth-of-type(2) {
					background-color: #06111a;
				}
				&:nth-of-type(3) {
					div {
						color: #8b96a2;
						&:first-child {
							color: #fff;
						}
					}
				}
			}
		}
	}
	&__case {
		.cards {
			--num-cols: 1;

			display: grid;
			grid-template-columns: repeat(var(--num-cols), 1fr);
			gap: var(--grid-column-gutter);

			@include media-min($medium) {
				--num-cols: 2;
			}

			@include media-min($large) {
				--num-cols: 3;
			}
		}
		.card {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 3rem 3.2rem 3.2rem;
			text-decoration: none;
			border: 1px solid var(--card-border-color);
			border-radius: var(--card-border-radius);
			transition: all var(--default-transition-params);
			cursor: pointer;
			color: #fff;
			img {
				margin-bottom: 48px;
				height: 43px;
				width: auto;
			}
			&:hover {
				box-shadow: var(--card-box-shadow);
				transform: var(--card-transform);
			}
		}
		.card-content {
			flex: 1;
			margin: 30px 0;
		}
		.card-button {
			text-align: right;
			width: 100%;
		}
	}
}