: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;
			
			.shade {
				font-size: 2.25em;
				font-weight: bold;
				text-transform: uppercase;
			}

			.tags {
				font-size: 0.7em;
				ul {
					line-height: 1;
					list-style-type: none;
					margin: 0;
					padding: 0;
					display: flex;
					flex-wrap: wrap;
					gap: 0.2em;
					li {
						border: 1px solid var(--page_color-foreground);
						padding: 0.4em;
					}
				}
			}
		}

		& > ul.details {
			line-height: 1.2rem;
			margin-top: 0.2rem;
			font-size: 0.8rem;

			display: flex;
			justify-content: space-between;

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

			& > li {
				flex-grow: 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);
				}
			}

			.rate {
				font-size: 1.2rem;
				line-height: 1;
			}
		}

		.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;
			font-style: italic;
			line-height: 1.5;
			font-size: 0.8em;

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

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

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