:is(#el, .announcement-block) {
	
	margin-top: 64px;
	
	& .resource {
		margin: 0;
	}
	
	& .related-resource-comp {
		padding: 0 var(--sideGap);
	}
	
	& .resource h4 a {
		position: relative;
		padding-right: 30px;
		&:is(:hover, :focus) {
			color: #4D758F;
		}
		&::after {
			position: absolute;
			top: 0;
			right: 0;
			height: 30px;
			width: 30px;
		}
	}
	
	& .resource {
		padding: 0;
		scroll-snap-align: start;

		@media (max-width: 991px) {
			min-width: 300px;
		}

		& a {
			color: #343A40;
		}
		& img {
			margin-bottom: 0;
		}
		& figure {
			margin-bottom: 20px;
		}
		& .desc {
			justify-content: normal;
			gap: 8px;
		}
		& .tag-wrap + p {
			margin-bottom: 0;
			order: -1;
			& a { display: none }
			&::after {
				content: attr(data-term);
				color: #00A398;
				font-size: 16px;
				font-weight: 500;
				line-height: 120%; /* 19.2px */
			}
		}
		& .resource-inner {
			background-color: transparent;
		}
		& .tag-wrap {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 8px;
			padding-top: 15px;

			& .tag-link {
				&::after { display: none }

				width: fit-content;
				border-radius: 50px;
				background: rgba(154, 94, 148, 0.10);
				display: flex;
				padding: 2px 10px;
				color: #9A5E94;
				text-align: center;
				font-size: 14px !important;
				font-weight: 500;
				line-height: 150%;
				letter-spacing: 0.035px;
				margin: 0;

				&:is(:hover, :focus) {
					text-decoration: underline;
				}
			}
		}
	}
	
	& .variant-1,
	& .variant-2,
	& .variant-3,
	& .variant-4 {
		& .resource-inner {
			flex-direction: row;
			gap: 64px;
			border-radius: 20px;
			background: #F5F5F7;
			padding: 30px;
		}
		:is(h4, p, figure + figure) {
			padding: 0;
		}
		& .resource { max-width: 100%; }
		& .desc {
			flex: 1;
			& p {
				margin-bottom: 0;
			}
		}
		& figure {
			flex: auto;
  			max-width: 460px;
			margin: 0;
		}
		& h4 {
			font-size: 24px;
			font-style: normal;
			font-weight: 600;
			line-height: 125%;
			margin-bottom: 20px;
			& a {
				font-size: inherit !important;
				text-wrap: auto;
				line-height: inherit;
			}
		}
		& .tag-wrap + p {
			font-size: 18px;
			font-style: normal;
			font-weight: 500;
			line-height: 120%; /* 21.6px */
			letter-spacing: -0.18px;
			margin-bottom: 8px;
			&::after {
				font-size: inherit;	
			}
		}
	}
	
	& .variant-2,
	& .variant-3,
	& .variant-4 {
		& .resource h4 a {
			&::after {
				height: 24px;
				width: 24px;
			}
		}
		& h4 {
			font-size: 18px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			margin-bottom: 10px;
		}
		& .resource-inner {
			padding: 20px;
			gap: 24px 24px;
		}
		& .resource {
			.desc p {
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				line-height: 150%; /* 21px */
				letter-spacing: 0.07px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
		}	
		& .tag-wrap + p {
			font-size: 14px;
			font-style: normal;
			font-weight: 500;
			line-height: 120%;
			margin-bottom: 0;
		}
	}
	
	& .variant-2 {
		& .row { flex-wrap: nowrap; }
		& img {
			aspect-ratio: 317 / 221;
			object-fit: cover;
		}
		& figure {
			max-width: 317px;
		}
		& .resource {
			flex: auto;
			&:last-child {
				flex: 76%;
				& figure { display: none }
			}
		}
	}
	
	
	& .variant-3,
	& .variant-4 {
		& .row {
			display: grid;
			grid-template-columns: 37% 1fr;
			grid-template-rows: auto auto;
			grid-column-gap: 24px;
			grid-row-gap: 24px; 
			& .resource:nth-child(1) {
				grid-area: 1 / 1 / 3 / 2;
				& .resource-inner {
					display: block;
					& figure {
						margin-bottom: 24px;
					}
				}
			}
			& .resource:nth-child(2) {
				 grid-area: 1 / 2 / 2 / 3;
			}
			& .resource:nth-child(3) {
				 grid-area: 2 / 2 / 3 / 3;
			}
			& .resource:nth-last-child(1),
			& .resource:nth-last-child(2) {
				& figure {
					max-width: 36%;
					& img {
						aspect-ratio: 238 / 192;
					}
				}
			}
		}
	}
	
	& .variant-4 {
		& .row {
			grid-template-columns: 1fr 1fr 30.5%; 
			& .resource:nth-child(1),
			& .resource:nth-child(2) { 
				& .resource-inner {
					display: block;
					& figure {
						margin-bottom: 24px;
					}
				}
			}
			& .resource:nth-child(1) {
				grid-area: 1 / 1 / 3 / 2;
			}
			& .resource:nth-child(2) {
				 grid-area: 1 / 2 / 3 / 3;
			}
			& .resource:nth-child(3) {
				 grid-area: 1 / 3 / 2 / 4;
			}
			& .resource:nth-child(4) {
				 grid-area: 2 / 3 / 3 / 4;
			}
			& .resource:nth-last-child(1),
			& .resource:nth-last-child(2) {
				& figure { display: none }
			}
		}
	}

	@media (max-width: 991px) {
		
		& .variant-1,
		& .variant-2,
		& .variant-3,
		& .variant-4 {
			& .row {
				display: flex;
				flex-direction: column;	
				& .resource:nth-child(n) .resource-inner {
					padding: 20px;
      				gap: 24px 24px;
					display: flex;
					flex-direction: row;
					& figure {
						display: block;
						max-width: 33.33%;
						margin-bottom: 0;
					}
					& img {
						aspect-ratio: 736/429;
					}
				} 
			}
		}
	}
	
	@media (max-width: 768px) {
		& .variant-1,
		& .variant-2,
		& .variant-3,
		& .variant-4 {
			& figure {
				max-width: 100% !important;
			}
			& .resource-inner {
				flex-direction: column !important;
			}
		}
	}
	
}