:root {
	--file-folders_file-img-sz: 12rem;
}

.file-folders {
	details.folder,
	.file,
	.file .img,
	.decor-box {
		border: 0.1rem var(--page_color-foreground);
		padding: 0.5em; 
	}

	details.folder,
	.file .img,
	.decor-box {
		border-style: solid;
	}

	.file {
		border-style: dashed;
	}

	.file:not(.file:last-child) {
		border-bottom: none;
	}

	.file .info {
		.property {
			text-transform: lowercase;
			font-weight: normal;
			font-style: normal;
		}

		& > .title {
			line-height: 1.2;
			
			.name {
				font-size: 2.25em;
				font-weight: bold;
				text-transform: uppercase;
			}

		}

		& > ul.details {
			font-size: 0.8rem;

			display: flex;
			justify-content: space-between;
			margin-top: 0.2em;

			border: 1px solid var(--page_color-foreground);

			& > li {
				flex-grow: 1;
				line-height: 1;

				display: flex;
				/* justify-content: center; */
				flex-wrap: wrap;
				gap: 0.2em;

				padding: 0.1em 0.3em;
				white-space-collapse: collapse;

				& + li {
					border-left: 1px solid var(--page_color-foreground);
				}
			}

		}

		.name-title {
			border: 1px solid var(--page_color-foreground);
			border-top-width: 0;

			font-size: 0.75em;
			padding: 0.1em 0.3em;

			.property {
				font-size: 0.8em;
			}
		}

		.letter {
			margin-top: 0.5em;
			line-height: 1.5;

			p {
				font-size: 0.9em;
				line-height: 1.5;
				margin: 0;
				& + * {
					margin-top: 0.5em;
				}
			}

			span.heading {
				display: block;
				font-weight: bold;
			}
			span.subheading1 {
				font-size: 0.8em;
				font-weight: bold;
			}

			ul, ol {
				margin: 0;
				li {
					line-height: 1.5;
					margin-top: 0.5em;

					&:first-child {
						margin-top: 0;
					}

					p {
						font-size: 0.85em;
						margin-top: 0.3em;
					}
				}
			}
		}
	}

	.file .img img {
		max-height: 11rem;
	}

	.decor-box {
		border-width: 0.05rem;
	}
}