.bc-resource-card {
	width: 100%;
	max-width: 300px;
	margin: 0 auto 20px;

	@media (--viewport-small) {
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: calc(50% - 20px);
		width: calc(50% - 20px);
		margin-right: 20px;
		margin-left: 0;
		max-width: 100%;

		&:nth-child(even) {
			margin-right: 0;
		}
	}

	@media (--viewport-wpadmin) {
		flex-basis: calc(33.3333% - 20px);
		width: calc(33.3333% - 20px);
		margin-right: 30px;
		margin-bottom: 30px;

		&:nth-child(even) {
			margin-right: 30px;
		}

		&:nth-child(3n+3) {
			margin-right: 0;
		}
	}
}

.bc-resource-card__link {
	display: block;
	height: 100%;
	text-decoration: none;
	border: 1px solid var(--color-bc-concrete);
	transform: translateY(0);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0);
	visibility: hidden;
	transition: var(--transition);

	&:hover,
	&:focus {
		transform: translateY(-5px);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	}

	.bc-tab-active .bc-cards-page-active & {
		visibility: visible;
	}
}

.bc-resource-card__image {
	position: relative;
	width: 100%;
	height: auto;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;

	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

.bc-resource-card__img-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-bc-concrete);
	opacity: 1;
	transition: var(--transition-opacity);

	.bc-resource-card-image-loaded & {
		opacity: 0;
	}
}

.bc-resource-card__content {
	padding: 20px;
}

.bc-resource-card__title {
	margin-top: 0;
	color: var(--color-bc-doger-blue);
}

.bc-resource-card__description {
	color: var(--color-bc-grey-medium);
	margin: 0;
}
