@import "@Themes/constants.scss";

.root {
	background-color: var(--grey-soft);
	padding: 24px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	&.single-information {
		.content {
			grid-template-columns: 1fr;
		}
	}

	.content {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 32px;
		width: 100%;

		.text-container {
			display: flex;
			flex-direction: column;
			overflow-wrap: anywhere;

			> :first-child {
				margin-bottom: 12px;
			}
		}

		@media (max-width: $screen-ls) {
			grid-template-columns: 1fr 1fr;
		}

		@media (max-width: $screen-s) {
			grid-template-columns: 1fr;
		}
	}

	.edit-icon-container {
		cursor: pointer;
		margin-left: 48px;
	}

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

		.edit-icon-container {
			margin-left: 0px;
			margin-top: 24px;
		}
	}
}