/* Full-bleed image on narrow screens */

.story-item--wide-feature .article-hero img {
    width: 100%;
    object-fit: cover;
}


@media screen and (max-width: 683px) {
    .story-item--wide-feature .article-hero figure {
        margin-inline: calc(-1 * var(--page-margin-sides));
        margin-bottom: 2rem;
    }
}

/* Only superimpose headline on top of image on wider screens... */

@media screen and (min-width: 684px) {

    /* Set size and aspect ratio of image onto the parent so that we can position both image and headline inside */

    .story-item--wide-feature .article-hero {
        --hero-aspect-ratio: 4 / 3;
        position: relative;
        aspect-ratio: var(--hero-aspect-ratio);
        overflow: hidden;
    }

    /* Fit the image perfectly inside parent */

    .story-item--wide-feature .article-hero img {
        position: absolute;
        inset: 0;   
        aspect-ratio: var(--hero-aspect-ratio);

        /* Override the height in pixels set by baselineElement.js */
        height: auto !important;
    }

    /* Superimpose article headline, etc on top of hero image */

    .story-item--wide-feature .article-hero > .wrapper {
        position: absolute;
        inset: 0; 
        display: flex;
        flex-direction: column;
        z-index: 1;
        padding: 3vw;
        margin-top: auto;
        height: fit-content;
        max-width: 90rem;
    }

    /* Custom headline position "x" */

    .story-item--wide-feature .article-hero[data-headline-x="centre"] > .wrapper {
        text-align: center;
        margin-inline: auto;
    }

    .story-item--wide-feature .article-hero[data-headline-x="right"] > .wrapper {
        text-align: right;
        margin-left: auto;
    }

    /* Background for headline */

    .story-item--wide-feature .article-hero img {
        filter: brightness(0.9);
    }

    .story-item--wide-feature .article-hero > .wrapper {
        color: white;
        text-shadow: 0 0 70px rgba(0, 0, 0, 0.6);
    }

    .story-item--wide-feature .article-hero > .wrapper::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        box-shadow: rgba(0, 0, 0, 0.6) 0 0 100px 100px;
        z-index: -1;
        opacity: 0.4;
    }

    /* Style headline link */

    .story-item--wide-feature .article-hero h2 {
        line-height: 1.25;
    }

    .story-item--wide-feature .article-hero h2 a:hover {
        background-color: rgb(255, 208, 0);
        text-shadow: none;
        color: black;
    }
}

@media screen and (min-width: 880px) {
    .story-item--wide-feature .article-hero {
        --hero-aspect-ratio: 16 / 9;
    }
}

/* Typography */

.story-item--wide-feature .tags a {
    text-transform: capitalize;
}

.story-item--wide-feature .tags a::before {
    content: '/';    
}

.story-item--wide-feature a:hover,
.story-item--wide-feature a:focus {
    color: inherit;
}

.story-item--wide-feature h2 {
    margin-block: 0.5em 0.8em;

    font-family: var(--typeface-display);
    font-weight: 500;
    font-size: clamp(1.5em, 4vw, 3.5em);
    line-height: 1.35;
}

@media screen and (min-width: 684px) {
    .story-item--wide-feature h2 {
        text-wrap: balance;
    }
}

.story-item--wide-feature .dek {
    font-size: clamp(2rem, 1.5vw, 2.5rem);
    line-height: 1.2;
    margin-bottom: 1.5em;
}

.story-item--wide-feature .author a {
    font-weight: bold;
}

.story-item--wide-feature .author a:hover,
.story-item--wide-feature .author a:focus {
    border-bottom: 2px solid;
    margin-bottom: -2px;
}