@import 'src/Components/GlobalStyles/colors';
@import 'src/Components/GlobalStyles/mixins';

.container {
	.body {
		&__main {
			width: 860px;
			margin: 0 auto 75px;

			@media (max-width: 1000px) {
				width: auto;
			}

			&__cards {
				display: flex;
				gap: 90px;
				align-items: center;

				@media (max-width: 1200px) {
					gap: 10px;
					flex-wrap: wrap;
				}
			}

			p {
				&:nth-child(2) {
					@media (max-width: 1000px) {
						//margin-left: 100px;
						//white-space: nowrap;
					}
				}
			}

			&__paragraph,
			&__paragraph2 {
				color: var(--primary-color);
				font-weight: 600;
				font-size: 24px;
				text-align: center;

				@media (max-width: 1000px) {
					//margin-left: 150px;
				}
			}

			.cardsContainer,
			.sideCardsContainer {
				margin-top: 50px;
				display: grid;
				grid-template-columns: repeat(2, 285px);
				gap: 30px;

				&__card {
					border: 1px solid var(--primary-color);
					border-radius: 10px;
					width: 285px;
					height: 120px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					p {
						font-weight: 600;

						&:first-child {
							margin-bottom: 10px;
							font-size: 24px;
						}

						&:nth-child(2) {
							font-size: 18px;
							color: var(--primary-color);
						}
					}
				}
			}

			.cashFlowSubTitleContainer {
				margin-top: 80px;

				&.cashFlowSubTitleContainerPrint {
					margin-top: 0px;
				}

				@media (max-width: 1000px) {
					//margin-left: 100px;
				}

				h3 {
					color: var(--primary-color);
					margin-bottom: 10px;
					font-size: 24px;
					font-weight: 600;
				}

				p {
					color: $font-grey-darker;
					font-size: 16px;
					font-weight: 500;
				}
			}

			.footerContainer {
				@include cashFlowFooter;

				margin-top: 70px;

				@media (max-width: 1000px) {
					margin-left: 50px;
				}
			}

			&__paragraph2 {
				@media (max-width: 1000px) {
					text-align: center;
				}
			}

			.sideCardsContainer {
				display: flex;
				flex-direction: column;
				gap: 40px;

				p {
					color: white !important;
					margin-bottom: 0 !important;
					padding: 5px 0;
				}

				&__card {
					display: flex;
					flex-direction: column;
					border: 2px solid var(--primary-color);
					box-shadow: 0 2px 10px 5px $dropShadow;
					background-color: var(--primary-color);

					&__title {
						font-size: 16px !important;
					}
				}
			}
		}

		.titleFirstChart {
			text-align: center;
			margin-top: 30px;
		}
	}

	.print_body__main__cards {
		display: grid;
		width: 100%;
		max-width: 100%;
		grid-template-columns: 77% 23%;
		transform: scale(0.75);
		gap: 0;

		.sideCardsContainer__card {
			box-shadow: none;
		}
	}
}

.titleExplainParagraph {
	&.print {
		padding-top: 70px;
	}

	@media (max-width: 1000px) {
		text-align: center;
		white-space: break-spaces !important;
	}
}