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

.story-section{
    background:#ffffff;
    padding:120px 20px;
}

.story-section .container{
    max-width:1200px;
    margin:0 auto;
}

.story-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

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

.story-image{
    position:relative;
}

.story-image img{
    width:100%;
    border-radius:22px;
    display:block;
    object-fit:cover;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

/* =========================================
   RATING CARD
========================================= */

.story-rating{
    position:absolute;
    left:30px;
    bottom:-30px;
    background:#ffffff;
    padding:20px 24px;
    border-radius:18px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.rating-stars{
    color:#D4AF37;
    font-size:20px;
    letter-spacing:2px;
    margin-bottom:10px;
}

.story-rating strong{
    display:block;
    color:#0A2540;
    font-size:20px;
    margin-bottom:5px;
}

.story-rating span{
    color:#666;
    font-size:15px;
}

/* =========================================
   CONTENT
========================================= */

.story-content h2{
    font-family:"Playfair Display",serif;
    font-size:64px;
    line-height:1.1;
    color:#0A2540;
    margin-bottom:30px;
}

.story-content p{
    color:#555;
    font-size:18px;
    line-height:1.9;
    margin-bottom:28px;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:991px){

.story-wrapper{
    grid-template-columns:1fr;
    gap:60px;
}

.story-content{
    order:2;
}

.story-image{
    order:1;
}

.story-content h2{
    font-size:48px;
}

.story-rating{
    left:20px;
    bottom:-20px;
}

}

@media(max-width:576px){

.story-section{
    padding:80px 20px;
}

.story-content h2{
    font-size:38px;
}

.story-content p{
    font-size:17px;
}

.story-rating{
    position:relative;
    left:0;
    bottom:0;
    margin-top:20px;
    display:inline-block;
}

.rating-stars{
    font-size:18px;
}

.story-rating strong{
    font-size:18px;
}

}