/* ... (Your existing CSS from before) ... */

.projects-content {
    padding: 40px;
    text-align: left;
}

.project-section {
    margin-bottom: 40px;
}

.section-heading {
    color: #D4AF37;
    font-size: 2em;
    margin-bottom: 20px;
}
.project-text {
    flex: 1; /* Allow text to take remaining space */
}

.project-text h3 {
    color: #D4AF37;
    margin-bottom: 10px;
}

.project-text h4 {
    margin-bottom: 15px;
}

.project-text ol {
    list-style-type: decimal;
    margin-left: 20px;
}

.project-text ol li {
    margin-bottom: 15px;
}

.project-text ul {
    list-style: disc;
    margin-left: 20px;
}

.project-text ul li {
    margin-bottom: 10px;
}

/* ... (Your existing CSS from before) ... */

/* New styles for project grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 30px; /* Space between grid items */
}

.project-item {
    /* Removed display: flex */
    /* Removed align-items: flex-start */
    margin-bottom: 0; /* No bottom margin needed with grid */
    border: 1px solid #333; /* Add border */
    padding: 20px; /* Add padding */
    border-radius: 5px; /* Add rounded corners */
    background-color: #222;
}

.project-image {
    width: 100%; /* Image fills container */
    margin-bottom: 15px; /* Space between image and text */
    /* Removed margin-right: 30px;  */
    /* Removed flex-shrink: 0;     */
}

.project-image img {
    width: 100%;
    height: auto;
    display: block; /* Remove extra space below image */
    border-radius: 5px 5px 0 0;
}


/* ... (Rest of your CSS remains the same) ... */