@import "@Themes/constants.scss";

.root {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl, 32px);

	.top {
		display: flex;
		gap: var(--spacing-lg, 24px);

		.folder-info-container {
			flex-direction: column;
			display: flex;
			width: 100%;
			gap: var(--spacing-sm, 8px);

			.office-container {
				display: flex;
				align-items: center;
				gap: var(--spacing-md, 16px);
			}
		}

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

			flex-direction: column;
		}
	}

	.documents {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-xl, 32px);

		.content {
			display: flex;
			flex-direction: column;
			gap: var(--spacing-xl, 32px);
			width: 100%;

			@media screen and (max-width: $screen-s) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: var(--spacing-md, 16px);
			}

			@media screen and (max-width: 734px) {
				display: grid;
				grid-template-columns: 1fr;
				gap: var(--spacing-xl, 32px);
			}
		}
	}
}