.blogarticles{
	.filters.row{
		margin-bottom: 40px;
		gap: 16px 0;

		.dropdown-menu{
			min-width: 100%;
			padding: 0;
			background: var(--wp--preset--color--gray-2);

			li + li{
				border-top: 1px solid var(--wp--preset--color--gray-10);
			}

			.dropdown-item{
				padding: 14px 24px;
				font-size: 16px;
				font-weight: 700;
				line-height: 1.1875;
				letter-spacing: 0.005em;
				color: var(--wp--preset--color--gray-40);
				text-transform: uppercase;

				@media (max-width: 767px){
					padding-left: 10px;
					padding-right: 10px;
					font-size: 14px;
				}

				&:hover,
				&.active{
					background-color: var(--wp--preset--color--gray-10);
					color: var(--wp--preset--color--gray-60);
				}
			}
		}

		.btn{
			width: 100%;
			justify-content: space-between;

			@media (max-width: 767px){
				padding-left: 10px;
				padding-right: 10px;
			}

			&::after{
				--icon: url(../../images/dropdown.svg);
				content: '';
				width: 16px;
				aspect-ratio: 16/10;
				-webkit-mask: var(--icon) no-repeat center/contain;
				mask: var(--icon) no-repeat center/contain;
				background: currentColor;
				transition: background-color .3s ease;
			}

			&.show::after{
				transform: rotate(180deg);
			}
		}

		input[type=search],
		input[type=search]:focus{
			background: var(--wp--preset--color--gray-2) url(../../images/search.svg) right 16px center no-repeat;
			border-color: var(--wp--preset--color--gray-2);
		}
	}

	.listing{
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		gap: 24px 0;

		@media (max-width: 991px){
			grid-template-columns: 1fr 1fr;
		}

		@media (max-width: 767px){
			gap: 40px;
		}

		@media (max-width: 575px){
			grid-template-columns: 1fr;
		}

		.excerpt{
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
		}
	}

	&[data-view=list]{
		.filters{
			margin-bottom: 64px;
		}

		.listing{
			grid-template-columns: auto 1fr;
			gap: 0;

			[data-filter-item]{
				grid-column: span 2;
				display: grid;
				grid-template-columns: subgrid;
			}

			.article-item{
				grid-column: span 2;
				display: grid;
				grid-template-columns: subgrid;
				align-items: center;
				gap: 40px;
				margin: -1px 0 0;
				padding: 32px 12px;
				border: 1px solid var(--wp--preset--color--gray-15);
				border-width: 1px 0;

				&:hover{
					background-color: var(--wp--preset--color--gray-5);
				}
			}

			.title, .category{
				margin: 0;
			}

			.image, .excerpt{
				display: none;
			}
		}
	}
	&.show-all .show-all-wrapper{
		display: none !important;
	}

	@media (min-width: 992px){
		&:not(:has( [data-filter-item]:nth-child(7) )) .show-all-wrapper{
			display: none !important;
		}

		&:not(.show-all) [data-filter-item]:nth-child( n+7 of :not([hidden]) ){
			display: none;
		}
	}

	@media (min-width: 576px) and (max-width: 991px){
		&:not(:has( [data-filter-item]:nth-child(5) )) .show-all-wrapper{
			display: none !important;
		}

		&:not(.show-all) [data-filter-item]:nth-child( n+5 of :not([hidden]) ){
			display: none;
		}
	}

	@media (max-width: 575px){
		&:not(:has( [data-filter-item]:nth-child(4) )) .show-all-wrapper{
			display: none !important;
		}

		&:not(.show-all) [data-filter-item]:nth-child( n+4 of :not([hidden]) ){
			display: none;
		}
	}
}