/* Ways to give: fund cards with cut-corner images and a gold inner line. */

.ei.funds { background: var(--ei-paper); padding: clamp(64px, 8vw, 120px) 0; }
.ei .funds__head { max-width: 760px; margin-bottom: 44px; }
.ei .funds__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ei .fund { display: flex; flex-direction: column; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--ei-line); padding: 14px 14px 22px; transition: box-shadow .25s, transform .25s; }
.ei .fund:hover { box-shadow: 0 0 0 1.5px var(--ei-gold), 0 30px 50px -36px rgba(16, 26, 63, .5); transform: translateY(-4px); }
.ei .fund__media { position: relative; aspect-ratio: 4 / 3; background: var(--ei-lapis);
	clip-path: polygon(6% 0, 94% 0, 100% 8%, 100% 92%, 94% 100%, 6% 100%, 0 92%, 0 8%); }
.ei .fund__media img { width: 100%; height: 100%; object-fit: cover; }
.ei .fund__frame { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; }
.ei .fund__frame polygon { fill: none; stroke: rgba(240, 196, 106, .9); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ei .fund__ph { width: 40%; height: 100%; margin: 0 auto; fill: none; stroke: var(--ei-gold-2); stroke-width: .02; }
.ei .fund__body { display: flex; flex-direction: column; flex: 1; padding: 20px 8px 0; }
.ei .fund__t { font: 400 26px/1.1 var(--ei-display); }
.ei .fund__x { margin: 10px 0 20px; font-size: 15px; line-height: 1.55; color: var(--ei-body); }
.ei .fund__btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1180px) {
	.ei .funds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	.ei.funds { padding: 56px 0 64px; }
	.ei .funds__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}