.section-featured {
    margin-top: 2em;
    overflow: hidden;
    position: relative
}

h1.screen-reader-only+.section-featured {
    margin-top: var(--spacing-9)
}

.section-featured article {
    background-color: var(--color-black);
    border-radius: var(--radius-5);
    display: flex;
    flex: 0 0 var(--container-wide--width);
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: var(--spacing-9) var(--spacing-10);
    position: relative;
    scroll-snap-align: center;
    z-index: 1
}

.section-featured .section-featured-body {
    margin-bottom: auto;
    margin-top: auto;
    padding-bottom: 13%;
    padding-top: 16%
}

.section-featured .section-featured-body>.post-status-icons {
    justify-content: center;
    margin-bottom: var(--spacing-6);
    position: relative;
    z-index: 1
}

.section-featured .section-featured-body>.post-status-icons>a,
.section-featured .section-featured-body>.post-status-icons>span {
    backdrop-filter: blur(10px) saturate(140%)
}

.section-featured .section-featured-body>.post-status-icons>a:not(:hover),
.section-featured .section-featured-body>.post-status-icons>span {
    background-color: hsla(0, 0%, 100%, .2)
}

.section-featured .section-featured-body>h3 {
    font-size: clamp(22px, 16.3158px + 1.5789vw, 40px);
    font-weight: var(--font-semibold)
}

.section-featured .section-featured-body>p {
    color: var(--color-contrast);
    font-size: clamp(1rem, .9605rem + .1754vw, 1.125rem);
    margin-top: var(--vertical-rhythm)
}

.section-featured .section-featured-body>:where(span, h3, p, div) {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-small--width);
    text-align: center;
    width: 100%
}

.section-featured .section-featured-body>a {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.section-featured .section-featured-body>.section-featured-media {
    height: 100%;
    left: 0;
    max-width: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1
}

.section-featured .section-featured-body>.section-featured-media:before {
    background-color: var(--color-black);
    bottom: 0;
    content: "";
    left: 0;
    opacity: .8;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1
}

.section-featured .section-featured-body>.section-featured-media img {
    height: 100%;
    margin-left: -200px;
    max-width: calc(100% + 400px);
    -o-object-fit: cover;
    object-fit: cover;
    transform: translateX(calc(-200px + var(--carousel--element--progress)*400px));
    width: calc(100% + 400px)
}

.section-featured .section-featured-body>.section-featured-media .image {
    height: 100%;
    width: 100%
}

.section-featured .section-featured-body>.section-featured-media .post-card-video {
    height: 100%;
    left: 0;
    margin-left: -200px;
    max-width: calc(100% + 400px);
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0;
    transform: translateX(calc(-200px + var(--carousel--element--progress)*400px));
    width: calc(100% + 400px)
}

.section-featured .section-featured-footer {
    align-items: center;
    align-self: center;
    backdrop-filter: blur(10px) saturate(140%);
    background-color: hsla(0, 0%, 100%, .2);
    border-radius: 2rem;
    color: var(--color-contrast);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-small);
    font-weight: var(--font-medium);
    gap: var(--spacing-6);
    justify-content: center;
    margin-top: var(--spacing-9);
    padding: var(--spacing-2) var(--spacing-6) var(--spacing-2) var(--spacing-2);
    width: auto
}

.section-featured .carousel-container {
    display: flex;
    gap: var(--spacing-9);
    padding-left: calc((var(--screen-width) - var(--container-wide--width))/2);
    padding-right: calc((var(--screen-width) - var(--container-wide--width))/2);
    scroll-snap-stop: always;
    scroll-snap-type: x mandatory;
    width: 100%
}

.section-featured .carousel-controls>button {
    background-color: var(--color-background);
    border-radius: 50%;
    box-shadow: 0 2px 20px -5px rgba(0, 0, 0, .16);
    padding: var(--spacing-5);
    position: absolute;
    top: 50%;
    transition-duration: .15s;
    transition-property: opacity, visibility, color, background-color;
    transition-timing-function: ease-in-out;
    z-index: 3
}

.section-featured .carousel-controls>button>svg {
    display: block;
    height: 1.25em;
    width: 1.25em
}

.section-featured .carousel-controls>button:hover {
    background-color: var(--color-contrast);
    color: var(--color-background)
}

.section-featured .carousel-controls>button:first-child {
    left: calc((var(--screen-width) - var(--container-wide--width))/2);
    transform: translate(-50%, -50%)
}

.section-featured .carousel-controls>button:last-child {
    right: calc((var(--screen-width) - var(--container-wide--width))/2);
    transform: translate(50%, -50%)
}

.section-featured .carousel-end .carousel-button-next,
.section-featured .carousel-start .carousel-button-prev {
    opacity: 0;
    visibility: hidden
}