@import "@Themes/constants.scss";

.root {
	display: flex;
	justify-content: baseline;
	align-items: center;
	flex-direction: column;
	gap: 64px;
	max-width: 1000px;
	margin: auto;

	@media (max-width: $screen-m) {
		margin-top: 24px;
	}

	.top-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.forfeits-container {
		display: flex;
		gap: 32px;

		width: 100%;

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

		.forfeit-block {
			flex: 1;
			padding: 32px;
			border: 1px solid black;

			display: flex;
			flex-direction: column;
			gap: 32px;

			.forfeit-header {
				display: flex;
				flex-direction: column;
			}

			.separator {
				border-bottom: 1px solid black;
			}

			.price-container {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}
		}
	}

	.infos-container {
		display: flex;
		flex-direction: column;
		gap: 16px;
		.line {
			display: flex;
			gap: 16px;
		}
	}
}