.products{
	.categories{
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		border-bottom: 1px solid var(--wp--preset--color--gray-10);

		@media (max-width: 767px){
			border-bottom: 0;
			gap: 20px;
		}

		a{
			margin: 0 0 -1px;
			padding: 6px 12px;
			border-bottom: 1px solid transparent;
			font-size: 16px;
			font-weight: 700;
			line-height: 1.1875;
			letter-spacing: 0.005em;
			color: var(--wp--preset--color--gray-40);
			text-transform: uppercase;
			text-decoration: none;

			@media (max-width: 767px){
				margin: 0;
				padding: 0;
			}

			&.active{
				border-color: var(--wp--preset--color--gray-80);
				color: var(--wp--preset--color--gray-80);
			}
		}
	}
	.listing{
		display: grid;
		gap: 40px 16px;
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
		margin: 60px 0 0;

		@media (max-width: 1199px){
			grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		}

		@media (max-width: 767px){
			gap: 24px 16px;
			grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
			margin: 32px 0 0;
		}

		.article-item{
			padding: 20px 20px 40px;
			color: var(--wp--preset--color--gray-40);

			@media (max-width: 767px){
				padding: 8px;
			}

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

			.category{
				hyphens: auto;
				margin: 24px 0;

				@media (max-width: 767px){
					margin: 16px 0;
				}
			}

			.title{
				font-size: 20px;
				font-weight: 500;
				color: var(--wp--preset--color--gray-80);
				text-transform: none;

				@media (max-width: 767px){
					margin-bottom: 4px;
					font-size: 16px;
					line-height: 1.3125;
				}
			}

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

				@media (max-width: 767px){
					-webkit-line-clamp: 5;
				}
			}
		}

		.extra_tab_content{
			grid-column: 1/-1;
			padding: 20px 0 0;

			.btn{
				margin: 36px 0 0;
			}
		}

		&:not(:has([hidden])) .extra_tab_content{
			display: none;
		}
	}
}