.articles {
	 background: white;
}
 .articles .article {
	 display: flex;
	 flex-direction: column;
}
 .articles .article__heading {
	 height: 320px;
	 background: #f1f1f8;
	 width: 100%;
	 display: flex;
	 flex-direction: column;
	 gap: 2rem;
	 overflow: hidden;
	 align-items: center;
	 justify-content: center;
	 position: relative;
	 text-align: center;
}
 .articles .article__heading__mask-right, .articles .article__heading__mask-left {
	 background: rgba(241, 241, 249, 0.03);
	 backdrop-filter: blur(1px);
	 mask-image: linear-gradient(var(--mask-deg), rgba(6, 6, 6, 0) 0%, #060606 27.36%);
	 position: absolute;
	 pointer-events: none;
	 user-select: none;
	 width: 45%;
}
 .articles .article__heading__mask-right {
	 --mask-deg: 90deg;
	 right: 0;
	 top: 0;
	 bottom: 0;
}
 .articles .article__heading__mask-left {
	 --mask-deg: 270deg;
	 left: 0;
	 top: 0;
	 bottom: 0;
}
 .articles .article__heading span {
	 color: #171745;
	 font-size: 3.3rem;
	 font-style: normal;
	 font-weight: 600;
	 letter-spacing: -0.12rem;
	 margin-top: -1.2rem;
}
 .articles .article img {
	 max-height: 320px;
	 object-fit: cover;
}
 .articles .article__info {
	 margin-top: 1.55rem;
	 font-size: 1rem;
	 font-style: normal;
	 font-weight: 400;
	 line-height: 100%;
	 letter-spacing: -0.05rem;
}
 .articles .article__info__category {
	 color: var(--primary-color);
}
 .articles .article__info__date {
	 opacity: 0.6;
}
 .articles .article__body {
	 color: var(--text-normal);
	 margin-top: 1.2rem;
}
 .articles .article__title {
	 color: #000;
	 font-size: 1.25rem;
	 font-style: normal;
	 font-weight: 600;
	 line-height: 100%;
	 letter-spacing: -0.0625rem;
}
 .articles .article__link {
	 width: fit-content;
	 text-align: left;
	 margin-top: 1rem;
	 font-weight: 500;
	 padding-left: 0;
	 color: var(--primary-color);
	 position: relative;
	 display: inline-block;
}
 .articles .article__link:hover {
	 filter: brightness(0.8);
}
 .articles .article__link:after {
	 content: '';
	 position: absolute;
	 bottom: -1px;
	 left: 0;
	 right: 0;
	 height: 1px;
	 background: var(--primary-color);
}
 .articles .article__title--with-mt {
	 margin-top: 1.2rem;
}
 .articles__list {
	 grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	 display: grid;
	 gap: 3rem;
	/* Small Screen */
}
 @media (min-width: 640px) {
	 .articles__list {
		 gap: 1rem;
	}
}

.article__title:hover  {
	 color: var(--primary-color);
}
 @media (min-width: 768px) {
	 .articles__list {
		 transform: translateY(-140px);
		 gap: 3rem;
		 grid-template-columns: repeat(2, 1fr);
	}
}