.project-details-layout {
    margin-top: 70px;
    /* keeps it clean under header */
}

/* LEFT SIDE MEDIA */
.project-media {
    display: block;
}

.project-media-main {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.project-media-main img {
    width: 100%;
    height: 360px;
    /* adjust if you want taller */
    object-fit: cover;
    display: block;
}

/* 2 images grid */
.project-media-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.project-media-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.project-media-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* RIGHT SIDE CARD */
.project-info-card {
    background: #f5f6f7;
    border-radius: 10px;
    padding: 22px 20px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
    border: 1px solid rgba(0, 0, 0, .05);
}

.project-info-card .subtitle {
    display: block;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    color: #555;
    margin-bottom: 10px;
}

/* Optional strip like sample */
.project-brand-strip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0 14px 0;
}

.project-brand-strip img {
    height: 26px;
    width: auto;
    display: block;
}

/* tighten meta list */
.project-info-card .meta-post {
    margin: 0 0 12px 0;
}

.project-info-card .meta-post li {
    margin-bottom: 10px;
}

/* make CTA look like sample */
.project-cta-btn {
    width: 100%;
    text-align: center;
    padding: 14px 16px !important;
    border-radius: 8px !important;
    background: #8b1e2d !important;
    /* deep red */
}

.project-cta-btn:hover {
    background: #31373a !important;
}

/* MOBILE */
@media (max-width: 991px) {
    .project-media-main img {
        height: 320px;
    }

    .project-media-item img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .project-media-grid {
        grid-template-columns: 1fr;
    }

    .project-media-main img {
        height: 260px;
    }

    .project-media-item img {
        height: 220px;
    }
}