.seizure-summary-page {
	min-height: 680px;
	max-width: 1166px;
	width: 100%;
	margin: 0 auto;

	@media screen and (min-width: 1200px) {
		min-height: 867.5px;
	}

	.summary-content {
		max-width: 816px;
		margin: 0 auto;

		@media screen and (min-width: 992px) {
			padding: 34px 0 94px;
		}

		.summary-content-inner {
			padding-inline: 24px;
			padding-top: 24px;
		}
	}

	.storm-content {
		margin: 0 auto;

		@media screen and (min-width: 992px) {
			padding: 34px 0 0;
		}
	}

	.content-inner {
		max-width: 816px;
		margin: 0 auto;
		padding-inline: 24px;
		padding-top: 24px;

		@media screen and (min-width: 992px) {
			padding: 40px 24px 0;
		}
	}

	.summary-header,
	.storm-header {
		margin-bottom: 5px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 1rem;

		h2 {
			letter-spacing: -0.03em;
			color: var(--navy-20);
			margin-bottom: 0;
			flex: 0 0 100%;

			@media screen and (min-width: 992px) {
				flex: 0 0 auto;
			}
		}

		.summary-download {
			flex: 0 0 auto;
			display: flex;

			button {
				background: none;
				border: none;
				padding: 0;
				cursor: pointer;
			}

			img {
				width: 20px;
			}
		}

		.summary-divider {
			flex: 1;
			height: 1px;
			display: block;
			border-top: 1px dashed #1A3E6F;
			opacity: 0.6;

			@media screen and (min-width: 992px) {
				flex: 1 0 auto;
			}
		}
	}

	.summary-back-link {
		color: var(--navy-20);
		text-decoration: underline;
		display: inline-block;
		font-size: var(--bs-font-size-p-small);
		line-height: var(--bs-line-height-p-small);
		margin-bottom: 15px;
	}

	.summary-info-box {
		background-color: var(--navy-80);
		padding: 16px;
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin: 15px 0 24px;

		.summary-info-box-text {
			color: var(--navy-20);

			sup {
				font-size: 11px;
			}
		}

		p {
			margin: 0;
			color: #173A61;
			font-size: 16px;
			line-height: 24px;
		}
	}

	.summary-sections {
		display: flex;
		flex-direction: column;
		gap: 30px;

		.summary-section {
			display: flex;
			flex-direction: column;
			gap: 5px;

			h3 {
				margin: 0;
				font-size: 18px;
				color: var(--navy-20);
				font-weight: 500;
				span {
					font-size: 14px;
					letter-spacing: -0.03em;
					@media screen and (max-width: 991px) {
						display: block;
					}
				}
			}

			p {
				color: #424242;
				margin: 0;
			}
		}
	}

	.summary-references {
		margin-top: 24px;
		padding-block: 24px;
		border-top: 1px solid var(--navy-60);

		h3 {
			font-size: 14px;
			line-height: 1.4;
			color: var(--navy-20);
			font-weight: 500;
			margin: 0 auto 8px;
		}

		p {
			font-size: 14px;
			line-height: 1.4;
			color: var(--gray-10);
			margin: 0;
		}
	}

	.storm-subtitle {
		font-size: 18px;
		line-height: 22px;
		color: #173A61;
		margin-bottom: 15px;

		@media screen and (min-width: 768px) {
			font-size: 20px;
			line-height: 24px;
			margin-bottom: 20px;
		}
	}

	.storm-intro {
		margin-bottom: 12px;

		p {
			color: #424242;
			margin: 0;
		}

		.storm-intro-heading {
			font-size: 28px;
			line-height: 1.25;
			letter-spacing: -0.03em;
			font-weight: 300;
			color: var(--navy-20);
			padding-bottom: 8px;
			border-bottom: 0.5px solid var(--gray-10);
			margin-block: 10px;
		}
	}

	.storm-sections {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.storm-card {
		background-color: #fff;
		overflow: hidden;
		display: flex;

		.storm-card-header {
			background-color: #E1E8F5;
			display: flex;
			align-items: center;

			.storm-letter {
				background-color: var(--blue);
				width: 65px;
				height: 100%;
				font-size: 40px;
				font-weight: 500;
				letter-spacing: -0.03em;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				@media screen and (min-width: 992px) {
					width: 90px;
				}
			}

			.storm-icon {
				flex: 1;
				align-items: center;
				justify-content: center;
				display: none;
				width: 92px;
				height: 92px;

				@media screen and (min-width: 992px) {
					display: flex;
				}

				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.storm-card-body {
			padding: 4px 12px;
			border-top: 0.5px solid var(--gray-10);
			border-right: 0.5px solid var(--gray-10);
			border-bottom: 0.5px solid var(--gray-10);
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 2px;

			@media screen and (min-width: 992px) {
				padding: 6px 24px;
			}

			h3 {
				color: var(--navy-20);
				font-weight: bold;
				margin: 0;
			}

			.storm-question {
				color: var(--gray-10);
				margin: 0;
			}

			.storm-example {
				font-size: var(--bs-font-size-p-small);
				line-height: var(--bs-line-height-p-small);
				color: var(--gray-10);
				margin: 0;
			}
		}
	}

	.pagination {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		padding-block: 0;

		@media (max-width: 575px) {
			justify-content: start;
		}

		span {
			color: var(--gray-10);
			font-size: 18px;
		}

		.btn {
			line-height: 2;
		}
	}

	.summary-pagination {
		padding-block: 24px;
		border-top: 1px solid #C5D0DF;
		margin-top: 0;			
		margin-inline: 25px;

		.summary-page-btn {
			text-decoration: none;
		}
	}

	.storm-navigation {
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-top: 45px;
		padding: 24px;
		border-top: 1px solid #C5D0DF;

		@media screen and (min-width: 992px) {
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			position: relative;
		}

		.storm-navigation-left {
			display: flex;
			justify-content: flex-start;

			@media screen and (min-width: 992px) {
				flex: 0 0 auto;
				max-width: calc(50% - 120px);
				padding-right: 24px;
			}

			@media screen and (max-width: 991px) {
				.btn-secondary {
					font-size: 14px;
					line-height: 1.4;
					padding: 14px 20px;
				}
			}
		}

		.storm-navigation-center {
			display: flex;
			justify-content: start;
			z-index: 1;

			@media screen and (min-width: 992px) {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}

			.storm-pagination {
				border-top: none;
				padding-top: 0;
				margin-top: 0;

				@media screen and (min-width: 992px) {
					padding-block: 0;
					pointer-events: auto;
				}

				.summary-page-btn {
					text-decoration: none;
				}
			}
		}

		.storm-navigation-right {
			display: flex;
			flex-direction: column;
			gap: 10px;
			align-items: flex-start;

			@media screen and (min-width: 992px) {
				flex-direction: row;
				align-items: center;
				gap: 12px;
				flex: 0 0 auto;
				max-width: calc(50% - 120px);
				padding-left: 24px;
				margin-left: auto;
			}

			.storm-navigation-label {
				color: var(--gray-10);
				white-space: nowrap;
			}

			@media screen and (max-width: 991px) {
				.btn-primary {
					font-size: 14px;
					line-height: 1.4;
				}
			}
		}

		.btn-primary {
			text-align: left;
			height: max-content;
		}
	}
}