.projects-investment-list { width: calc(100% + 32px); margin-left: -16px; margin-bottom: -60px; }
.projects-investment-item { width: 33.33%; padding: 0 16px; margin-bottom: 60px; }
.projects-investment-card { width: 100%; position: relative; background: var(--views-dark-green); color: var(--views-white); border-radius: 10px; overflow: hidden; transition: all .3s ease; }
.projects-investment-img { width: 100%; position: relative; padding-bottom: 88.5%; }
.projects-investment-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.projects-investment-card:hover .projects-investment-img img { transform: scale(1.05); }
.projects-investment-img::after { content: ''; width: 100%; height: 100%; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 52.24%, rgba(0, 0, 0, 0.5) 100%); opacity: 0.5; transition: all 0.4s ease; }
.projects-investment-card:hover .projects-investment-img::after { background: linear-gradient(184.26deg, rgba(0, 0, 0, 0) 13.4%, rgba(0, 0, 0, 1) 96.53%); opacity: 0.9; }
.projects-investment-content { width: 100%; height: 100%; position: absolute; inset: 0; padding: 24px; z-index: 2; }
.pic-status { font-size: 18px; font-weight: 400; margin-bottom: 12px; }
.pic-status-icon { width: 28px; height: 28px; padding: 5px; margin-right: 16px; background: #F3C395; border-radius: 3px; }
.pic-status-icon img { width: 100%; height: 100%; object-fit: contain; }
.pic-title { font-size: 24px; margin-bottom: 0; }
.pic-body { width: 100%; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease, padding 0.4s ease; }
.projects-investment-card:hover .pic-body { grid-template-rows: 1fr; margin-top: 12px; }
.pic-extra { gap: 24px; overflow: hidden; }
.pic-meta-list { width: calc(100% + 16px); margin-left: -8px; margin-bottom: -16px; }
.pic-meta-item { width: 50%; padding: 0 8px; margin-bottom: 16px; }
.pic-meta-box { font-size: 16px; }
.pic-meta-icon { width: 24px; height: 24px; }
.pic-meta-icon img { width: 100%; height: 100%; object-fit: contain; }
.pic-btn { width: fit-content; padding: 8px 20px; font-family: var(--views-font-primary-400); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--views-green); background: var(--views-light-green); border-radius: 40px; transition: var(--views-custom-ease); }
.pic-btn:hover { color: var(--views-green); background: #D0E4BE; }
.projects-investment-pagination { max-width: 230px; margin: 0 auto; margin-top: 80px; }
.projects-investment-pagination > p { font-size: 14px; margin-bottom: 0; }
/* ====================================================== 
! Extra large devices (large desktops, less than 1600px)
====================================================== */
@media (max-width:1599.98px) { }
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
.projects-investment-item { width: 50%; }
}
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
.projects-investment-pagination { margin-top: 60px; }
}
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) {
.projects-investment-grid { width: calc(100% + 24px); margin-left: -12px; margin-bottom: -24px; }
.projects-investment-item { width: 100%; padding: 0 12px; margin-bottom: 24px; }
.projects-investment-img { padding-bottom: 77.3%; }
.pic-title { font-size: 20px; }
.pic-extra { gap: 12px; }
.projects-investment-pagination { margin-top: 48px; }
}
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:575.98px) {
.pic-meta-list { margin-bottom: -4px; }
.pic-meta-item { width: 100%; margin-bottom: 4px; }
}