/* THEME LIST (index.php) */

.theme-list {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;
	list-style: none; margin: 30px 0 50px 0; padding: 0;
	}
.theme-list li {
	display: flex; margin: 0; line-height: 1.3;
	}
.theme-list a {
	flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 110px; padding: 20px 22px;
	-webkit-box-sizing: border-box; box-sizing: border-box;
	border: 3px solid #333; background: #fff; color: #333; text-decoration: none; transition: all 0.1s ease-out;
	}
.theme-list a:hover,
.theme-list a:focus-visible {
	background: #111; border-color: #111; color: #fff;
	}
.theme-list a:focus-visible {
	outline: 3px solid #FC3; outline-offset: 3px;
	}
.theme-list .theme-name {
	font-family: 'Rubik', "Helvetica Neue", Arial, sans-serif; font-weight: 500; font-size: 24px;
	}
.theme-list .theme-doc-label {
	margin-top: 18px; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; opacity: .5;
	}
.theme-list a:hover .theme-doc-label,
.theme-list a:focus-visible .theme-doc-label {
	opacity: .8;
	}

.theme-list-help {
	margin: 30px 0 0 0; padding: 22px;
	border: 3px solid #111; background: #FC3; color: #111; font-size: 16px; font-weight: bold; line-height: 1.5; text-align: center;
	}
.theme-list-help p {
	margin: 0 0 16px 0;
	}
.theme-list-help .btn {
	background: #111; border-color: #111; color: #FC3;
	}
.theme-list-help .btn:hover,
.theme-list-help .btn:focus-visible {
	background: #fff; border-color: #111; color: #111;
	}


@media screen and (max-width:480px) {
	.theme-list { grid-template-columns: 1fr 1fr; gap: 12px; }
	.theme-list a { min-height: 90px; padding: 14px 16px; }
	.theme-list .theme-name { font-size: 19px; }
	.theme-list-help { padding: 16px; font-size: 15px; }
}