.resources-hub { width: 100vw; max-width: none; margin: 0; padding: 64px 20px 76px; background: #fff; }
.resources-hub__inner { width: min(100%, 1200px); }
.resources-hub h2 { margin: 0 0 16px; color: #252525; font-family: 'DM Sans', system-ui, sans-serif; font-size: clamp(1.9rem, 2.3vw, 2.35rem); font-weight: 700; letter-spacing: .025em; line-height: 1.25; }
.resources-tabs { display: flex; justify-content: center; gap: 9px; margin-bottom: 62px; }
.resources-tab { min-width: 138px; min-height: 53px; padding: 0 24px; border: 0; background: #087ff5; color: #fff; font: inherit; font-size: .95rem; cursor: pointer; transition: background .18s ease; }
.resources-tab:hover, .resources-tab.is-active { background: #068985; }
.resources-panel[hidden] { display: none; }
.resources-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.resource-card { position: relative; display: block; aspect-ratio: 420 / 530; overflow: hidden; background: #087ff5; color: #252b33; text-decoration: none; box-shadow: 0 3px 14px rgb(20 47 68 / 5%); }
.resource-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom center; }
.resource-card::before { content: ''; position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: 47%; background: #fff; }
.resource-card__bar { position: absolute; z-index: 2; top: 9%; bottom: 12%; left: 6%; width: 8px; background: #8b3333; }
.resource-card__title { position: absolute; z-index: 2; top: 13%; right: 6%; left: 14%; font-size: clamp(1rem, 1.25vw, 1.3rem); letter-spacing: .13em; line-height: 1.35; }
.resource-card__title small { display: block; margin-bottom: 3px; font-size: .83em; }
.resource-card__open { position: absolute; z-index: 2; right: 0; bottom: 8%; left: 0; color: #fff; font-family: Georgia, serif; font-size: .65rem; letter-spacing: .14em; text-align: center; }
.resource-card { transition: transform .2s ease, box-shadow .2s ease; }
.resource-card:hover { box-shadow: 0 12px 30px rgb(13 55 91 / 18%); transform: translateY(-5px); }
.resources-empty { margin: 40px 0; color: #555; text-align: center; }

@media (max-width: 1050px) {
	.resources-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.resources-hub { padding: 48px 20px 55px; }
	.resources-hub h2 { text-align: center; }
	.resources-tabs { margin-bottom: 38px; }
	.resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 420px) {
	.resources-tabs { gap: 6px; }
	.resources-tab { min-width: 0; flex: 1; padding-inline: 12px; }
	.resources-grid { grid-template-columns: 1fr; }
	.resource-card { width: min(100%, 280px); justify-self: center; }
}