ul.dir-gallery {
	list-style-type: none;
	margin: 0;
	padding: 0;

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

	p {
		line-height: 1.5;
	}

	.entry {
        border: 0.1rem solid var(--global_color-foreground);
		border-width: 0.1rem;
        padding: 0.5rem;
		width: 10.75rem;

		line-height: 1.5;
		text-align: center;

		.entry-img {
			--entry-img-box-size: 9rem;
			width: var(--entry-img-box-size);
			height: var(--entry-img-box-size);
			display: block;
			margin-inline: auto;
			border: 0.05rem solid var(--global_color-foreground);
			background-image: var(--entry-img-src);
			background-size: var(--entry-img-size);
			background-position: var(--entry-img-pos);
		}

		.entry-title {
			margin-top: 0.5rem;

			.link {
				font-weight: bold;
			}
		}

		span.date {
			display: block;
			font-size: 0.8rem;
		}
		span.heading {
			font-size: 0.8rem;
			text-decoration: underline;
		}
	}

	&.with-desc {
		display: grid;
		grid-gap: 0.5rem;
		.entry {
			width: unset;
			display: flex;
			flex-wrap: wrap;

			.entry-img {
				--entry-img-box-size: 8rem;
			}

			.entry-title {
				flex-grow: 1;
			}
		}
	}
}

@media (min-width: 750px) {
	ul.dir-gallery {
		&.with-desc {
			grid-template-columns: repeat(2, 1fr);

			.entry {
				display: flex;
				flex-wrap: nowrap;
				gap: 0.5rem;

				.entry-title {
					margin-top: 0;
				}

				.entry-img {
					--entry-img-box-size: 10rem;
					flex-basis: var(--entry-img-box-size);
					min-width: var(--entry-img-box-size);
					max-height: var(--entry-img-box-size);
				}
			}
		}
	}
}