.ht-gallery-eyebrow
{
    letter-spacing: 0.08em;
}

.ht-filter-button
{
    border-radius: 50rem;
    padding: 0.55rem 1.1rem;
}

.ht-filter-button.active,
.ht-filter-button:hover,
.ht-filter-button:focus
{
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    color: #fff;
}

.ht-gallery-item
{
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.ht-gallery-item.ht-is-hidden
{
    display: none;
}

.ht-gallery-card
{
    overflow: hidden;
    border-radius: 1rem;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ht-gallery-card:hover
{
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12) !important;
}

.ht-gallery-open
{
    display: block;
    width: 100%;
    cursor: pointer;
}

.ht-gallery-image-wrapper
{
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: #f1f1f1;
}

.ht-gallery-image
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.ht-gallery-card:hover .ht-gallery-image,
.ht-gallery-open:focus-visible .ht-gallery-image
{
    transform: scale(1.04);
}

.ht-gallery-overlay
{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.25s ease;
}

.ht-gallery-card:hover .ht-gallery-overlay,
.ht-gallery-open:focus-visible .ht-gallery-overlay
{
    background-color: rgba(0, 0, 0, 0.38);
}

.ht-gallery-view-icon
{
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: #fff;
    color: #212529;
    font-size: 1.15rem;
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.ht-gallery-card:hover .ht-gallery-view-icon,
.ht-gallery-open:focus-visible .ht-gallery-view-icon
{
    opacity: 1;
    transform: scale(1);
}

.gallery-cta
{
    background-color: var(--bs-danger);
    color: #fff;
}

.ht-modal-image-stage
{
    position: relative;
    display: grid;
    place-items: center;
    min-height: 65vh;
    padding: 1rem 4.5rem;
    background-color: #111;
}

#htGalleryModalImage
{
    max-width: 100%;
    max-height: 72vh;
    object-fit: contain;
}

.ht-gallery-nav
{
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    transform: translateY(-50%);
}

.ht-gallery-prev
{
    left: 1rem;
}

.ht-gallery-next
{
    right: 1rem;
}

.ht-gallery-nav:disabled
{
    opacity: 0.25;
}

@media (max-width: 575.98px)
{
    .ht-modal-image-stage
    {
        min-height: 55vh;
        padding: 1rem 3.25rem;
    }

    .ht-gallery-nav
    {
        width: 2.5rem;
        height: 2.5rem;
    }

    .ht-gallery-prev
    {
        left: 0.35rem;
    }

    .ht-gallery-next
    {
        right: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce)
{
    .ht-gallery-card,
    .ht-gallery-image,
    .ht-gallery-item,
    .ht-gallery-view-icon
    {
        transition: none;
    }
}