/*-----------------------My work---------------------*/
#work {
    margin: 14px 0;
    background-color: var(--surface);
    color: var(--text);
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}

.work-projects {
    margin-top: 10px;
    padding: 0 28px 28px;
}

@media (max-width: 720px) {
    .work-projects {
        padding: 0 16px 22px;
    }
}

.work-project {
    margin: 14px 0;
    background-color: var(--surface);
    color: var(--text);
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.work-project:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    background-color: var(--card-hover-bg);
    border-color: var(--card-hover-border);
}

.work-project__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.work-project__media {
    width: 100%;
    display: flex;
    justify-content: center;
}

.work-project__gallery {
    display: grid;
    --work-thumb-h: 220px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .work-project__gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .work-project__gallery {
        grid-template-columns: 1fr;
    }
}

.work-project__image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 10px;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    margin: 0 auto;
}

.work-project__gallery .work-project__image {
    max-width: none;
    aspect-ratio: 4 / 3;
    height: var(--work-thumb-h);
    padding: 10px;
    object-fit: contain;
    transform: scale(0.95);
    transform-origin: center;
}

.work-project__text {
    flex: 1;
    min-width: 260px;
}

.work-project__title {
    color: var(--text);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.work-project__text p {
    color: var(--muted);
    margin-top: 10px;
}

.work-project__text p:first-of-type {
    color: var(--text);
}

.work-project__meta {
    margin-top: 10px;
    color: var(--muted);
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}

@media (min-width: 900px) {
    /* Keep full-width thumbnails on larger screens. */
}