/* Shared manual gallery carousel and the inset page-content frame. */
.home-page main,.gallery-page main {
    position: relative
}
.home-page main:before,.gallery-page main:before {
    content: '';
    position: absolute;
    inset: 24px;
    z-index: 4;
    border: 1px solid rgba(198,165,101,.72);
    pointer-events: none
}
.gallery-carousel {
    --carousel-gap: 24px;
    --carousel-dots-space: 33px;
    position: relative;
    width: 92%;
    max-width: 1680px;
    margin: auto;
    box-sizing: border-box;
    padding: 0 64px
}
.carousel-viewport {
    overflow: hidden
}
.carousel-track {
    display: flex;
    gap: var(--carousel-gap);
    transition: transform 480ms cubic-bezier(.22,.61,.36,1);
    will-change: transform
}
.carousel-slide {
    flex: 0 0 calc((100% - var(--carousel-gap))/2);
    min-width: 0
}
.carousel-slide .gallery-open {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
    cursor: pointer
}
.carousel-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #eee9de
}
.carousel-media:after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8,43,35,.14);
    pointer-events: none;
    transition: background 300ms ease
}
.carousel-slide:hover .carousel-media:after,.gallery-open:focus-visible .carousel-media:after {
    background: rgba(8,43,35,.06)
}
.carousel-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease
}
.gallery-open:hover img,.gallery-open:focus-visible img {
    transform: scale(1.04)
}
.carousel-placeholder {
    background: linear-gradient(135deg,#eee9de,#f6f2e9)
}
.carousel-arrow {
    position: absolute;
    top: calc((100% - var(--carousel-dots-space))/2);
    z-index: 2;
    width: 42px;
    height: 50px;
    border: 1px solid #c6a565;
    background: #fff;
    color: #082b23;
    font: 34px/1 Georgia,serif;
    cursor: pointer;
    transform: translateY(-50%)
}
.carousel-arrow:hover,.carousel-arrow:focus-visible {
    background: #082b23;
    color: #fff;
    outline: 2px solid #c6a565;
    outline-offset: 3px
}
.carousel-arrow.previous {
    left: 0
}
.carousel-arrow.next {
    right: 0
}
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px
}
.carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #b8b2a5;
    cursor: pointer
}
.carousel-dots button[aria-current="true"] {
    background: #c6a565;
    transform: scale(1.25)
}
.gallery-page .gallery-section {
    padding-top: 24px
}
.gallery-page .gallery-section .gallery-carousel {
    margin-top: 15px
}
.home-page .gallery-preview {
    position: relative
}
.home-page .gallery-preview>* {
    position: relative;
    z-index: 5
}
/* Changes carousel slide counts and controls for tablet and mobile widths. */
@media(max-width:767px) {
    .gallery-carousel {
        --carousel-gap: 14px;
        --carousel-dots-space: 21px;
        width: 100%;
        padding: 0
    }
    .home-page main:before,.gallery-page main:before {
        inset: 12px
    }
    .carousel-slide {
        flex-basis: 100%
    }
    .carousel-arrow {
        top: calc((100% - var(--carousel-dots-space))/2);
        width: 34px;
        height: 44px;
        background: rgba(255,255,255,.92)
    }
    .carousel-arrow.previous {
        left: 8px
    }
    .carousel-arrow.next {
        right: 8px
    }
    .carousel-dots {
        margin-top: 14px
    }
}
@media(prefers-reduced-motion:reduce) {
    .carousel-track,.carousel-media:after,.carousel-media img {
        transition: none
    }
    .gallery-open:hover img,.gallery-open:focus-visible img {
        transform: none
    }
}