@import "@Themes/constants.scss";

.root {
	display: flex;
	justify-content: space-between;
	gap: 104px;
	max-width: 1400px;
	margin: auto;
	@media (max-width: $screen-m) {
		margin-top: 40px;
		margin-bottom: 40px;
		gap: 72px;
	}

	@media (max-width: $screen-s) {
		margin-bottom: 50px;
	}

	.left {
		display: flex;
		gap: 40px;
		flex-direction: column;
		.infos-container {
			display: flex;
			flex-direction: column;
			gap: 16px;
			.line {
				svg {
					min-width: 24px;
					min-height: 24px;
				}
				display: flex;
				gap: 16px;
			}
		}
	}

	.right {
		width: 372px;
		@media (max-width: $screen-m) {
			margin-top: 50px;
		}

		@media (max-width: $screen-s) {
			display: none;
		}
	}

	button {
		@media (max-width: $screen-s) {
			display: none;
		}
	}
}

.bottom {
	display: none;
	position: sticky;
	bottom: 0px;
	flex-direction: column;
	justify-content: center;
	gap: 32px;
	box-shadow: 0px 8px 10px 0px #00000012;
	padding: 22px 16px;
	border-radius: 16px 16px 0 0;
	background: white;

	@media (max-width: $screen-s) {
		display: flex;
	}

	box-shadow: 0px 4px 24px 0px #00000026;

	.forfeit-type {
		text-align: center;
	}

	.container-frequency {
		display: flex;
		justify-content: space-between;
	}

	.separator {
		width: 100%;
		height: 1px;
		background-color: gray;
	}

	.container-line {
		display: flex;
		justify-content: space-between;
		gap: 24px;
	}

	.container-tight {
		gap: 8px;
	}
}