.card-resource {
	position: relative;
	display: block;
	text-decoration: none;
	border: 1px solid var(--card-border-color);
	transition: all var(--default-transition-params);

	&:hover {
		box-shadow: var(--card-box-shadow);
		transform: var(--card-transform);
	}

	&--featured {
		border: none;
		box-shadow: var(--card-box-shadow);
		&:hover {
			transform: translateY(0);
		}

		@include media-min($medium) {
			display: grid;
			grid-template-columns: 1fr;
			gap: 3.2rem;

			.card-resource__image-container {
				width: 100%;
				height: 100%;
				grid-row: 1;
				grid-column: 1;
				margin-left: 0;
			}

			.card-resource__content-container {
				grid-row: 2;
				grid-column: 1;
				padding-top: 0;
			}

			.card-event__content-container {
				padding-top: 0;
			}
		}
	}

	&__image-container {
		position: relative;
		height: 0;
		padding-top: 33%;
		margin-left: -1px;
		margin-top: -1px;
		margin-right: -1px;
		&.small {
			padding-top: 16%;
		}
	}

	&__image {
		@include image-cover-entire-container;

		display: block;
	}

	&__content-container {
		padding: 3.2rem;
	}

	&__content {
		margin-top: 1rem;
		color: var(--body-font-color);
		&-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		&-status {
			display: flex;
			gap: 1rem;
		}
	}

	&__category{
		font-size: 16px;
		color: #74808B;
	}

	&__title {
		color: #28333e;
	}

	&__status {
		font-size: 14px;
		line-height: 20px;
		color: var(--color-white);
		padding: 2px 6px;
		margin-top: 0;
		&.in-progress {
			background: var(--color-yellow);
		}
		&.completed {
			background: var(--color-gray);
		}
		&.upcoming {
			background: var(--color-green);
		}
	}

	&__webinar {
		font-size: 14px;
		line-height: 20px;
		color: var(--color-white);
		padding: 2px 6px;
		display: flex;
		align-items: center;
		background: #7494e6;
		i {
			margin-right: 0.4rem;
			width: 1rem;
			height: 1rem;
			display: block;
			background: url("#{$theme-url-base}/media/images/icon-video.png") center/contain
				no-repeat;
		}
	}

	&__date,
	&__location {
		display: flex;
		font-size: 1.6rem;
		font-weight: 300;
		i {
			vertical-align: middle;
			margin-top: 4px;
			margin-right: 1rem;
		}
	}
	&__location {
		margin-top: 1rem;
	}
}

.card-resource-news {
	border: none;
	box-shadow: var(--card-box-shadow);
	.card-resource__image-container {
		padding-top: 30%;
	}

	.card-resource__image {
		width: auto;
		height: auto;
		max-height: 35px;

		top: unset;
		left: 4rem;
		right: 4rem;
		bottom: 2rem;
	}
}