$o-data-bp1: 1000;
$o-data-icon-size: 80px;
$o-data-icon-ring-size: 8px;
$o-data-icon-line-height: 32px;
$o-data-content-top-padding: space(8);
$o-data-content-bottom-padding: space(8);

.o-data {
	@include mq($max: $o-data-bp1) {
		background-color: palette(primary, 100);
	}
}


.o-data__main {
	position: relative;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto repeat(2, $o-data-icon-size/2) auto;

	@include mq($o-data-bp1) {
		grid-template-columns: minmax(#{columnVw(1,14), 1fr}) repeat(2, minmax(0, #{$site-max-width/2*1px})) minmax(#{columnVw(1,14), 1fr});
		grid-template-rows: space(6) auto repeat(2, $o-data-icon-size/2) auto space(8);
	}

	// middle line on top
	@include mq($o-data-bp1) {
		&::before {
			content: '';
			position: absolute;
			z-index: 2;
			top: 0;
			left: calc(50% - 1px);
			height: space(12);
			width: 2px;
			background-color: red;
			background-image: linear-gradient(to bottom, palette(primary, 600) 50%, palette(neutral, 0) 50%);
		}
	}
}


.o-data__figure1 {
	grid-row: 1 / 3;
	grid-column: 1;

	@include mq($o-data-bp1) {
		grid-row: 2 / 5;
		grid-column: 1 / 3;
	}
}


.o-data__figure2 {
	@include mq($max: $o-data-bp1) {
		display: none;
	}
	@include mq($o-data-bp1) {
		grid-row: 2 / 6;
		grid-column: 3 / 5;
	}
}


.o-data__img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}


.o-data__icon {
	grid-row: 2 / 4;
	grid-column: 1;
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: $o-data-icon-size;
	height: $o-data-icon-size;
	background: rgba(182, 215, 240, 0.24);
	backdrop-filter: blur(14px);

	@include mq($max: $o-data-bp1) {
		justify-self: center;
	}

	&::before {
		content: '';
		position: absolute;
		z-index: -1;
		top: $o-data-icon-ring-size;
		bottom: $o-data-icon-ring-size;
		right: $o-data-icon-ring-size;
		left: $o-data-icon-ring-size;
		background-color: palette(neutral, 0);
		border-radius: 50%;
	}

	&::after {
		content: '';
		position: absolute;
		z-index: 0;
		bottom: -$o-data-icon-line-height + $o-data-icon-ring-size;
		left: 50%;
		width: 1px;
		height: $o-data-icon-line-height;
		background-color: palette(primary, 600);
	}

	svg { margin-top: -8px; }

	@include mq($o-data-bp1) {
		grid-row: 3 / 5;
		grid-column: 2 / 3;
		transform: translateX(-50%);

		&::after {
			bottom: -$o-data-content-top-padding + $o-data-icon-ring-size;
			height: $o-data-content-top-padding;
			width: 2px;
		}
	}
}


.o-data__content {
	@include mq($max: $o-data-bp1) {
		@include contain;
		grid-row: 3 / 5;
		grid-column: 1;
		padding-top: $o-data-icon-size/2 + $o-data-icon-line-height - $o-data-icon-ring-size + space(3);
		padding-bottom: space(7);
	}

	@include mq($o-data-bp1) {
		grid-row: 4 / 7;
		grid-column: 2 / 3;
		margin-right: space(6);
		position: relative;
		z-index: 0;
		padding-top: $o-data-content-top-padding + $o-data-icon-size/2;
		padding-bottom: $o-data-content-bottom-padding ;
		padding-left: 8%;
		padding-right: 8%;

		&::before {
		    content: '';
			position: absolute;
			z-index: -1;
		    top: 0;
		    bottom: 0;
		    right: 0;
		    left: -50vw;
			background-color: palette(primary, 100);
		}

		&::after {
			content: '';
			position: absolute;
			z-index: 1;
			left: 0;
			background-color: palette(primary, 600);
			top: 0;
			bottom: $o-data-content-bottom-padding;
			width: 2px;
		}
	}
}


.o-data__list {
	display: grid;
	grid-gap: space(3);
	grid-template-columns: 1fr 1fr;
	margin: 0;

	dt {
		grid-column: 1;
		font-family: $font-mokoko;
		color: palette(primary, 500);
	}
	dd {
		grid-column: 2;
		color: palette(primary, 600);
	}
}