/* Styles for Project Card Images (on projects.html) */
.card-image-container {
    width: 100%;
    height: 180px; /* Or a height that suits your card design */
    overflow: hidden;
    /* Assuming --border-color and --border-radius are defined in your main style.css */
    /* If not, you might need to define them here or use fallback values */
    border-bottom: 1px solid var(--border-color, #e0e0e0); 
    border-top-left-radius: var(--border-radius, 8px); 
    border-top-right-radius: var(--border-radius, 8px);
}

.card-project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.card:hover .card-project-image { /* Ensure .card is defined in style.css */
    transform: scale(1.05);
}

/* Styles for Featured Project Image (on project.html) */
.project-featured-image-container {
    margin-bottom: 25px; /* Space below the image */
}

.project-featured-image {
    width: 100%;
    max-height: 450px; /* Adjust as needed */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; 
    /* Assuming --border-radius is defined in your main style.css */
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: block; /* Ensure it's a block element for margin auto if needed */
}