/**
 * Skylit dev cache — pattern: tff-home-resources
 * Auto-generated on save_post. Do not hand-edit.
 */

.tff-resources {
		padding-bottom: var(--padding-96);
		}
		/* Section header layout/typography from global .tff-section-header__* */
		.tff-resources__header {
		overflow-x: hidden;
		background: linear-gradient(
		180deg,
		var(--antique-white-lin-grad) 0%,
		rgba(245, 243, 238, 0) 100%
		);
		contain: layout style;
		}
		.tff-resources__grid-wrap {
		display: flex;
		gap: var(--gap-48);
		flex-direction: column;
		align-items: flex-start;
		}
		.tff-resources__cta {
		align-self: center;
		}
		.tff-resources__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--gap-48);
		width: 100%;
		max-width: 1400px;
		}
		@media (min-width: 640px) {
		.tff-resources__grid {
		grid-template-columns: repeat(2, 1fr);
		}
		}
		@media (min-width: 1024px) {
		.tff-resources__grid {
		grid-template-columns: repeat(2, 1fr);
		}
		}
		.tff-grid-card {
		position: relative;
		display: flex;
		flex-direction: column;
		min-height: 200px;
		background: var(--antique-white-lin-grad);
		border: var(--border-width-1) solid var(--absolute-black-10);
		overflow: hidden;
		text-decoration: none;
		color: inherit;
		}
		.tff-grid-card::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		width: 100%;
		height: var(--border-width-1);
		min-height: var(--border-width-1);
		display: block;
		background: var(--infrared-red);
		box-sizing: border-box;
		opacity: 0;
		transition: opacity 0.2s ease;
		}
		.tff-grid-card:hover {
		text-decoration: none;
		}
		.tff-grid-card:hover::after {
		opacity: 1;
		}
		.tff-grid-card__image {
		display: flex;
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		min-height: 180px;
		background: var(--antique-white-60);
		overflow: hidden;
		}
		.tff-grid-card__image img {
		flex: 1 1 0%;
		min-width: 0;
		width: 100%;
		min-width: 100%;
		height: inherit;
		min-height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
		}
		.tff-grid-card__content {
		display: flex;
		flex-direction: column;
		gap: var(--gap-16);
		padding: var(--padding-24);
		flex: 1;
		}
		.tff-grid-card__title {
		font-family: var(--h3-small-font-family);
		font-size: var(--h3-small);
		font-weight: var(--h3-small-font-weight);
		line-height: 150%;
		color: var(--absolute-black-gradient);
		margin: 0;
		}
		.tff-grid-card__excerpt {
		font-family: var(--card-excerpt-font-family);
		font-size: var(--card-excerpt);
		font-weight: var(--card-excerpt-font-weight);
		line-height: 150%;
		color: var(--graphite-gray);
		margin: 0;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		}
		.tff-grid-card__link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-family: var(--button-text-font-family);
		font-size: var(--tag-font-size);
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		color: var(--absolute-black-gradient);
		margin-top: auto;
		}
		.tff-grid-card__link-text {
		position: relative;
		}
		.tff-grid-card__link-text::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -2px;
		height: var(--border-width-1);
		background: var(--infrared-red);
		opacity: 0;
		transition: opacity 0.2s ease;
		}
		.tff-grid-card:hover .tff-grid-card__link-text::after {
		opacity: 1;
		}
		.tff-grid-card__link img {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
		}
		@media (min-width: 640px) {
		.tff-grid-card {
		flex-direction: row;
		min-height: 200px;
		}
		.tff-grid-card__image {
		width: 33.333%;
		min-width: 33.333%;
		aspect-ratio: auto;
		min-height: 200px;
		height: auto;
		align-self: stretch;
		}
		.tff-grid-card__content {
		padding: var(--padding-32);
		}
		.tff-grid-card__excerpt {
		-webkit-line-clamp: 4;
		line-clamp: 4;
		}
		}
		.tff-badge {
		font-family: var(--tag-font-family);
		font-size: var(--tag-font-size);
		font-weight: var(--tag-font-weight);
		background: none;
		color: var(--absolute-black-gradient);
		padding: 0;
		}
		.tff-badge--red {
		background: none;
		color: var(--infrared-red);
		text-transform: uppercase;
		}