@import "@Themes/constants.scss";

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

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

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

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

		&.isSignleDescription {
			grid-template-columns: 1fr;
		}
	}

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

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

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