@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins';

@baseFontSize: 1em;
@thumbWidth: 80px;
@cardBorder: 1px solid rgba( 0, 0, 0, 0.2 );

.read-more-container-heading {
	color: @color-subtle;
	border-bottom: 0;
	padding-bottom: 0.5em;
	font-size: 0.8em;
	font-weight: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.read-more-container-card-list {
	font-size: @baseFontSize;
	list-style: none;
	display: grid;
	row-gap: 10px;

	li {
		margin-bottom: 0;
	}

	a,
	a:hover {
		color: inherit;
		text-decoration: none;
	}

	a:hover {
		.cdx-card {
			box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );
		}
	}
}

@supports ( display: grid ) {
	@media all and ( min-width: @width-breakpoint-desktop ) {
		.read-more-container-card-list {
			grid-template-columns: repeat( 3, 1fr );
			column-gap: 10px;

			.read-more-container-card {
				width: 100%;
			}

			.cdx-card {
				height: 100%;
				box-sizing: border-box;
			}
		}
	}
}