@layer components.post-item {
	[data-c-post-item] {
		background-color: var(--color-white);

		a {
			display: flex;
			gap: var(--space-10);

			&:hover,
			&:focus {
				text-decoration: none;
			}

			@media screen and (max-width: 767px) {
				flex-direction: column;
				gap: var(--space-4);
			}

			.wrapper {
				position: relative;
				flex: 1 1 50%;
				display: flex;
				align-items: center;

				&.image-align-right {
					order: 2;

					@media screen and (max-width: 767px) {
						order: 0;
					}
				}

				svg {
					width: 100%;
					height: auto;
				}
			}

		}

		.content {
			flex: 1 1 50%;
			color: var(--color-dark-blue);
			display: flex;
			flex-direction: column;
			justify-content: center;

			@media screen and (max-width: 991px) {
				padding: 15px 10px 16px;
			}

			h3 {
				font-family: var(--font-family-serif);
				font-weight: var(--font-weight-extra-bold);
				font-size: var(--font-size-4xl);
				margin-bottom: 25px;
				line-height: 95%;

				@media screen and (max-width: 1199px) {
					font-size: var(--font-size-3xl);
					margin-bottom: var(--space-3);
				}

				@media screen and (max-width: 767px) {
					font-size: var(--font-size-2xl);
				}
			}

			.post-excerpt {
				line-clamp: 5;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 5;
				margin-bottom: var(--space-10);
				font-size: var(--font-size-base);

				@media screen and (max-width: 1199px) {
					font-size: var(--font-size-lg);
					margin-bottom: var(--space-8);
				}

				@media screen and (max-width: 767px) {
					font-size: var(--font-size-md);
					margin-bottom: var(--space-3);
				}
			}

			[data-c-button] {
				@media screen and (max-width: 767px) {
					background-color: transparent;
					color: inherit;
					border: none;
					font-weight: inherit;
					font-size: inherit;
					gap: 10px;
					padding: 0;

					&:hover {
						color: var(--color-red);
						outline: none;
					}
				}
			}

		}
	}
}