.file-folders {
	details.folder {
		/* border: 0.1rem solid var(--page_color-foreground);
		padding: 0.5em; */

		& + .folder {
			margin-top: 0.5rem;
		}

		summary {
			font-size: 1.2em;
			font-weight: bold;
		}
	}

	.file {
		/* border: 0.1rem dashed var(--page_color-foreground);
		padding: 0.5em; */

		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;

		.img {
			flex-basis: var(--file-folders_file-img-sz);
			flex-shrink: 0;

			min-width: var(--file-folders_file-img-sz);
			max-width: var(--file-folders_file-img-sz);
			max-height: var(--file-folders_file-img-sz);

			/* border: 0.05rem solid var(--page_color-foreground);
			padding: 0.5em; */

			display: flex;
			align-items: center;
			justify-content: center;
			
			img {
				flex-shrink: 0;
				flex-grow: 0;
				border: none;
				max-width: 100%;
				max-height: 100%; /*doesn't work*/
			}
		}

		.info {
			flex-basis: 0;
			flex-grow: 1;

			ul.details {
				list-style-type: none;
				padding-left: 0;
				margin: 0;
			}

			.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;
					}
				}
			}

			.letter {
				ul, ol {
					padding-left: 1.5em;
					margin-block: 1em;
				}
				ul {
					list-style-type: unset;
				}
				ol {
					list-style-type: decimal;
				}
			}
		}
	}

	summary + .file {
		margin-top: 0.5rem;
	}
}