/* Blog / news cards */

.articles-grid.ui.cards {
	.article-card.ui.card {
		@include default-shape();
		@include card-shadow();

		background: $whiteColor;
		overflow: hidden;

		@include small-desktop {
			width: calc(50% - 1em);
		}

		@include tablet {
			margin-bottom: 30px;
		}

		@include mobile {
			width: 100%;
		}

		.image {
			display: block;
			position: relative;
			height: 200px;

			.image-inner {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 2;
				overflow: hidden;
				height: 100%;

				img,
				picture {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.post-date {
				@include round(10px);

				background: $grayBackground2;
				border: 4px solid $whiteColor;
				padding: 5px 10px;
				font-size: 12px;
				font-weight: 600;
				position: absolute;
				left: 30px;
				z-index: 3;
				bottom: 0;
				transform: translateY(50%);
				color: $mainTextColor;
			}
		}

		.text-content {
			padding: 30px 30px 20px;

			h2 {
				line-height: 28px;
				margin-bottom: 15px;

				a {
					font-size: 18px;
					color: $headlinesColor;
					line-height: 28px;
					font-weight: 600;
				}
			}

			.description {
				font-size: 14px;
				line-height: 24px;
				color: $mainTextColor;
				max-width: 100ch;
			}
		}
	}
}