.panel--chart-panel {
	position: relative;
	padding-block: 100px;
	background-color: #FFF;
	background-image: url("../../images/background-tile-light.png");
	background-repeat: repeat;

	.chart-panel__eyebrow {
		position: absolute;
		top: 40px;
		left: 0;
		width: fit-content;
		padding: 10px 20px;
		background: var(--chart-eyebrow-background);
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.chart-panel__inner {
		display: flex;
		flex-direction: column;
		gap: 50px;

		.chart-panel__heading-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.chart-panel__title {
				font-family: var(--research-font-aleo);
				font-size: 30px;
				text-transform: uppercase;
				font-weight: 900;
				letter-spacing: 0.05em;
				text-align: center;
				margin: 0;
			}

			.chart-panel__body {
				font-family: var(--research-font-aleo);
				font-size: 30px;
				font-weight: 300;
				line-height: 32px;
				width: 80%;

				@media (max-width: 900px) {
					font-size: 18px;
				}
			}
		}
	}

	.chart-panel__tabs {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 50px;
	}

	.chart-panel__tab-list {
		display: flex;
		justify-content: center;
	}

	.chart-panel__tab-label {
		cursor: pointer;
		padding: 10px 20px;
		text-transform: uppercase;
		color: #AE2F54;
		border: 1px solid #AE2F54;
		background-color: transparent;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.05em;
	}

	.chart-panel__tab-label[aria-selected="true"] {
		color: white;
		background-color: #AE2F54;
	}

	.chart-panel__tab-panels,
	.chart-panel__tab-content {
		width: 100%;
	}

	.chart-panel__tab-content[hidden] {
		display: none;
	}

	.chart-panel__chart-row {
		width: 100%;
	}

	.chart-panel__chart-row--with-note {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr);
		gap: 40px;
	}

	.chart-panel__side-note {
		padding: 20px;
		font-size: 18px;
		line-height: 30px;
		color: #6A6B6C;
		border: 1px solid #F08B1E;
		height: fit-content;

		> :first-child {
			margin-top: 0;
		}

		> :last-child {
			margin-bottom: 0;
		}
	}

	.chart-panel__cta-container {
		display: flex;
		border-top: 1px rgba(256, 256, 256, 0.5) solid;
		padding-top: 50px;
		justify-content: end;

		.chart-panel__cta {
			display: flex;
			width: fit-content;
			align-items: center;
			gap: 10px;
			text-decoration: none;

			.chart-panel__cta-icon {
				display: inline-flex;
				flex: 0 0 auto;

				svg {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.chart-panel__cta-label {
				font-size: 17px;
				text-transform: uppercase;
				text-decoration: none;
			}

			&:hover .chart-panel__cta-label,
			&:focus-visible .chart-panel__cta-label {
				text-decoration: underline;
			}

			&.cta_orange svg, &.cta_orange .chart-panel__cta-label {
				color: #F08B1E;
			}

			&.cta_white svg, &.cta_white .chart-panel__cta-label {
				color: #FFF;
			}

			&.cta_blue svg, &.cta_blue .chart-panel__cta-label {
				color: #002467;
			}
		}
	}

	&.bg_white {
		background-color: #FFF;
		background-image: url("../../images/background-tile-light.png");

		.chart-panel__title, .chart-panel__body {
			color: #AE2F54;
		}
	}

	&.bg_grey {
		background-color: #E7E6E6;
		background-image: none;

		.chart-panel__title, .chart-panel__body {
			color: #AE2F54;
		}
	}

	&.bg_teal {
		background-color: #00A2A1;
		background-image: none;

		.chart-panel__title, .chart-panel__body {
			color: #FFF;
		}
	}
}

@media (max-width: 900px) {
	.panel--chart-panel .chart-panel__chart-row--with-note {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
	}

	.panel--chart-panel .chart-panel__visual,
	.panel--chart-panel .chart-panel__picture,
	.panel--chart-panel .chart-panel__image {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.panel--chart-panel .chart-panel__image {
		height: auto;
	}
}