.herdpress-categorized-list {
	.cat-list {
		display: grid;
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: var(--space-medium);

		@media (min-width: 48rem) {
			grid-template-columns: repeat(12, minmax(0, 1fr));
		}
	}

	.cat-list__content {
		order: 2;

		@media (min-width: 48rem) {
			order: 1;
			grid-column: span 8 / span 8;
		}

		@media (min-width: 64rem) {
			grid-column: span 9 / span 9;
		}

		.cat-list__item {
			padding-top: var(--space-medlarge);
			padding-bottom: var(--space-medlarge);
			border-bottom: 1px solid var(--gray-100);

			&:first-child {
				padding-top: 0;
			}

			&:last-child {
				border-bottom: 0;
			}
		}

		.cat-list__item-head {
			/* text-transform: uppercase; */
			color: var(--green);
			font-size: var(--font-size-2xl);
			font-weight: 700;
			/* text-shadow: 3px 3px 0px rgb(0 0 0 / 10%); */

			@media (min-width: 48rem) {
				font-size: var(--font-size-3xl);
			}

			@media (min-width: 90rem) {
				font-size: var(--font-size-4xl);
			}
		}

		.cat-list__item-sub {
			margin-top: var(--space-small);
			text-transform: uppercase;
			font-size: var(--font-size-base);
			font-weight: 600;
			color: var(--gray-500);

			@media (min-width: 48rem) {
				font-size: var(--font-size-lg);
			}
		}

		.cat-list__item-content {
			padding-top: var(--space-medlarge);
		}
	}

	.cat-list__menu {
		order: 1;

		@media (min-width: 48rem) {
			order: 2;
			grid-column: span 4 / span 4;
		}

		@media (min-width: 64rem) {
			grid-column: span 3 / span 3;
		}

		.sidemenu {
			position: sticky;
			top: 0;
			background-color: var(--gray-50);
			border-radius: 0.25rem;
			margin-bottom: var(--space-medlarge);

			@media (min-width: 48rem) {
				margin-bottom: 0;
			}

			.show-more {
				padding: var(--space-medium);
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: var(--gray-100);
				border-bottom: 1px solid var(--gray-200);
				border-radius: 0.25rem 0.25rem 0 0;
			}

			.show-more__title {
				font-weight: 600;
				text-transform: uppercase;
				color: var(--gray-600);
				font-size: var(--font-size-sm);
			}

			.show-more__button {
				@media (min-width: 48rem) {
					display: none;
				}
			}

			.show-more__svg {
				height: var(--space-medlarge);
				width: var(--space-medlarge);
			}

			.sidemenu__list {
				border-radius: 0 0 0.25rem 0.25rem;

				@media (min-width: 48rem) {
					display: block;
				}

				&.sidemenu__list--block {
					display: block;
				}

				&.sidemenu__list--hidden {
					display: none;

					@media (min-width: 48rem) {
						display: block;
					}
				}

				.sidemenu__ul {
					padding-left: 0;
					padding-top: 0;
					padding-bottom: 0;
					list-style: none;

					.sidemenu__li {
						margin: 0;
						border-bottom: 1px solid var(--gray-100);

						&:last-child {
							border-bottom: 0;
						}

						.sidemenu__a {
							display: block;
							text-align: left;
							width: 100%;
							padding: var(--space-x-small) var(--space-medium);
							color: var(--green);
							transition: all var(--transition);

							&:hover {
								color: var(--green-darker);
								background-color: rgba(var(--green), .1);
							}
						}
					}
				}
			}
		}
	}
}