/*==================================================
    STORIES
==================================================*/

.stories{

    padding:var(--space-section) 0;

    background:var(--color-white);

}

.stories .container{

    margin-bottom:140px;

}

/*==================================================
    SECTION HEADER
==================================================*/

.stories .section-header{

    width:100%;

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

    margin-bottom:100px;

    text-align:center !important;

}

.stories .section-subtitle{

    display:block;

    margin-bottom:32px;

    font-family:"Montserrat",sans-serif;

    font-size:.80rem;

    font-weight:500;

    letter-spacing:.35em;

    text-transform:uppercase;

    color:var(--color-gold);

}

.stories .section-title{

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.8rem,5vw,4.8rem);

    font-weight:400;

    line-height:1.1;

    color:var(--color-black);

}

/*==================================================
    STORY
==================================================*/

.story{

    display:block;

    max-width:var(--editorial-width);

    margin:0 auto var(--space-story);

    text-decoration:none;

    color:inherit;

}

/*==================================================
    STORY SPACING
==================================================*/

.story:last-child{

    margin-bottom:0;

}

/*==================================================
    STORY IMAGE
==================================================*/

.story-image{

    overflow:hidden;

    background:var(--color-editorial);

    border-radius:var(--radius-sm);

     max-width:var(--editorial-width);

    margin:0 auto;

}

.story-image img{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transform:scale(1);

    transition:

        transform

        var(--duration-normal)

        cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}
/*==================================================
    STORY WRAPPER
==================================================*/

.story-wrapper{

   max-width:var(--editorial-width);

    margin:0 auto;

    padding:0 60px;

}


/*==================================================
    STORY HOVER
==================================================*/

.story:hover .story-image img{

    transform:scale(1.025);

}

/*==================================================
    STORY INFO
==================================================*/

.story-info{

    max-width:var(--content-width);

    margin-top:var(--space-2xl);

}


.story-label{

    display:block;

    margin-bottom:18px;

    font-family:var(--font-body);

    font-size:.78rem;

    font-weight:500;

    letter-spacing:.38em;

    text-transform:uppercase;

    color:var(--color-light);

}

.story-title{

    margin-bottom:0;

    font-family:var(--font-title);

    font-size:clamp(2.8rem,4vw,4.2rem);

    font-weight:400;

    line-height:1;

    color:var(--color-black);

}
.story-title::after{

    content:"";

    display:block;

    width:56px;

    height:1px;

    margin:24px 0 26px;

    background:var(--color-gold);

}




.story-location{

    font-family:var(--font-body);

    font-size:.92rem;

    letter-spacing:.20em;

    text-transform:uppercase;

    color:var(--color-light);
	
	opacity:.75;

}

/*==================================================
    MOBILE — STORY TITLES
==================================================*/

@media (max-width:768px){

.story-title{

    font-size:clamp(2.2rem,8vw,3.2rem);

    line-height:1;

    white-space:normal;

    overflow-wrap:break-word;

    word-break:normal;

}
	
	.story-hero-content{

    width:100%;

    max-width:100%;

    padding-left:20px;

    padding-right:20px;

    box-sizing:border-box;

}

.story-hero-content h1{

    width:100%;

    max-width:100%;

    font-size:clamp(2.2rem,8vw,3.2rem);

    line-height:1.05;

    white-space:normal;

    overflow-wrap:break-word;

    word-break:normal;

}

}