/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 */
div.wp-block-artcloud-blocks-artcloud-authors {
	.post-block-title {
		margin-bottom: 38px;
	}

	// background-color: red;
	h2 {
		color: var(--wp--preset--color--art-primary);
	}

	// Owl Carousel CSS
	.row {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		/* Two columns with equal width */
		grid-row-gap: 50px;
		grid-column-gap: 30px;
	}

	.artcloud-item {
		background-color: var(--wp--preset--color--white);
		color: var(--wp--preset--color--black);
		margin-bottom: 30px;

		.artcloud-postImg {
			max-width: 16rem;
			margin: 0 auto;

			img {
				mask-image: url("./img/hero-image.png");
				mask-position: top center;
				mask-repeat: no-repeat;
				mask-size: 100% auto;
				width: 16rem;
				height: 16rem;
				object-fit: cover;
			}
		}

		.artcloud-content {
			margin-top: -100px;
			padding: 120px 30px 30px 30px;

			.artcloud-date-author {
				display: flex;
			}

			h6 {
				padding-left: 18px;
				font-size: 16px !important;
				margin-bottom: 15px !important;
			}

			p {
				font-size: 18px;
				line-height: normal;
				font-weight: 600;
				margin-bottom: 30px;
			}

			.wp-block-post-excerpt__more-link {
				padding: calc(0.667em + 2px) calc(1.333em + 2px);
				background: var(--wp--preset--color--primary);
				color: var(--wp--preset--color--white);
				text-decoration: none;
				border-radius: 3rem;
			}
		}
	}

	@media only screen and (max-width: 600px) {
		.row {
			display: grid;
			grid-template-columns: 1fr;
			/* one column with equal width */
			grid-row-gap: 20px;
		}
	}
}
