.art-gallery-hero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16);
    border-bottom: var(--border-width) solid var(--color-border);
    background:
        radial-gradient(
            circle at 85% 20%,
            rgb(215 25 32 / 18%),
            transparent 32rem
        ),
        var(--color-background);
}

.art-gallery-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
}

.art-gallery-hero__content {
    min-width: 0;
    max-width: var(--container-reading);
}

.art-gallery-hero__title {
    max-width: 13ch;
    margin-bottom: var(--space-5);
}

.art-gallery-hero__description {
    max-width: 60ch;
    color: var(--color-text-soft);
    font-size: var(--text-lg);
}

.art-gallery-hero__artist {
    min-width: 0;
    padding: var(--space-6);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 3%);
    box-shadow: var(--shadow-sm);
}

.art-gallery-hero__artist h2 {
    margin-bottom: var(--space-4);
}

.art-gallery-hero__artist p:last-child {
    margin-bottom: 0;
    color: var(--color-text-soft);
}

.art-gallery-collection {
    background: var(--color-surface);
}

.art-gallery-collection__count {
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.art-gallery-grid {
    columns: 1;
    column-gap: var(--space-5);
}

.art-gallery-item {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: 0 0 var(--space-5);
    overflow: hidden;
    break-inside: avoid;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-background);
    box-shadow: var(--shadow-sm);
}

.art-gallery-item__link {
    position: relative;
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.art-gallery-item__link::after {
    position: absolute;
    inset: 0;
    border: 0.125rem solid transparent;
    border-radius: inherit;
    background: linear-gradient(
        to top,
        rgb(8 8 8 / 28%),
        transparent 35%
    );
    content: "";
    pointer-events: none;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.art-gallery-item__image {
    display: block;
    width: 100%;
    height: auto;
    transition:
        filter var(--transition-fast),
        transform var(--transition-fast);
}

.art-gallery-item__link:hover .art-gallery-item__image {
    filter: brightness(1.05) contrast(1.03);
    transform: scale(1.015);
}

.art-gallery-item__link:hover::after {
    border-color: rgb(215 25 32 / 65%);
}

.art-gallery-item__link:focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
}

.art-gallery-empty {
    padding: var(--space-8);
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    text-align: center;
}

.art-gallery-empty p:last-child {
    margin-bottom: 0;
}

.art-gallery-cta {
    border-top: var(--border-width) solid var(--color-border);
    background:
        linear-gradient(
            135deg,
            rgb(215 25 32 / 12%),
            transparent 45%
        ),
        var(--color-background);
}

.art-gallery-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
}

.art-gallery-cta__inner > div:first-child {
    max-width: var(--container-reading);
}

.art-gallery-cta__inner p:last-child {
    margin-bottom: 0;
    color: var(--color-text-soft);
}

@media (min-width: 40rem) {
    .art-gallery-grid {
        columns: 2;
    }
}

@media (min-width: 48rem) {
    .art-gallery-hero__grid {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(17rem, 0.85fr);
        gap: var(--space-12);
    }

    .art-gallery-cta__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .art-gallery-cta .button-group {
        justify-content: flex-end;
    }
}

@media (min-width: 64rem) {
    .art-gallery-hero {
        padding-block: var(--space-20);
    }

    .art-gallery-hero__artist {
        padding: var(--space-8);
    }

    .art-gallery-grid {
        columns: 3;
        column-gap: var(--space-6);
    }

    .art-gallery-item {
        margin-bottom: var(--space-6);
    }
}

@media (prefers-reduced-motion: reduce) {
    .art-gallery-item__image,
    .art-gallery-item__link::after {
        transition: none;
    }

    .art-gallery-item__link:hover .art-gallery-item__image {
        transform: none;
    }
}