.link-card {
    display: block;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 16px 0;
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s ease-in-out;
    overflow: hidden; /* For containing floated elements */
}

.link-card:hover {
    background-color: #f5f5f5;
}

.link-card-content {
    display: flex;
    align-items: stretch; /* Make columns same height */
}

.link-card-text {
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.link-card-title {
    font-weight: bold;
    font-size: 1.1em;
}

.link-card-desc {
    font-size: 0.9em;
    color: #666;
    margin-top: 4px;
    flex-grow: 1; /* Allow description to grow */
    /* Truncate text to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-card-href {
    font-size: 0.8em;
    color: #888;
    margin-top: 8px;
    word-break: break-all;
}

.link-card-image-container {
    flex: 0 0 150px; /* Fixed width for the image container */
    max-width: 150px;
}

.link-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit container */
    border-left: 1px solid #ddd;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
    .link-card-content {
        flex-direction: column; /* Stack items vertically */
    }

    .link-card-image-container {
        flex: 0 0 auto; /* Reset flex properties */
        max-width: 100%;
        height: 180px; /* Give a fixed height for the image on mobile */
    }

    .link-card-image {
        border-left: none; /* Remove the border on mobile */
        border-bottom: 1px solid #ddd; /* Add a border below the image */
    }
}

/* Dark mode styles */
body[data-theme='dark'] .link-card {
    border-color: #444;
}

body[data-theme='dark'] .link-card:hover {
    background-color: #2d2d2d;
}

body[data-theme='dark'] .link-card-desc {
    color: #aaa;
}

body[data-theme='dark'] .link-card-image {
    border-left-color: #444;
}

body[data-theme='dark'] @media (max-width: 768px) {
    .link-card-image {
        border-bottom-color: #444;
    }
}