/* ==========================================================
   WORK
========================================================== */

.st-work{

    position:relative;
    overflow:hidden;

    padding:140px 6%;

    background:#F8F4EE;

}

.st-work-wrapper{

    width:100%;
    max-width:1380px;

    margin:auto;

}


/* ==========================================================
   TOP
========================================================== */

.st-work-top{

    display:grid;
    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:80px;

    margin-bottom:70px;

}


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

.st-work-header{

    max-width:760px;

}

.st-work-header span{

    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:26px;

    font-size:13px;
    letter-spacing:4px;
    text-transform:uppercase;

    color:#E8605A;

}

.st-work-header span::after{

    content:"";

    width:64px;
    height:1px;

    background:#E8605A;

}

.st-work-header h2{

    margin:0 0 28px;

    font-size:clamp(60px,6vw,90px);

    line-height:.92;

    font-weight:500;

    color:#122C46;

}

.st-work-header h2 em{

    display:block;

    margin-top:6px;

    font-family:"Cormorant Garamond",serif;
    font-style:italic;
    font-weight:400;

    color:#E8605A;

}

.st-work-header p{

    max-width:470px;

    margin:0;

    font-size:21px;
    line-height:1.7;

    color:#676767;

}


/* ==========================================================
   FLAMINGO
========================================================== */

.st-work-art{

    display:flex;
    justify-content:flex-end;
    align-items:center;

}

.st-work-art img{

    width:100%;
    max-width:520px;

    display:block;

}


/* ==========================================================
   LINE
========================================================== */

.st-work-line{

    height:1px;

    margin-bottom:46px;

    background:#E6D9CB;

}


/* ==========================================================
   GRID
========================================================== */

.st-work-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:34px;

}

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

.work-card{

    display:grid;

    grid-template-columns:58% 42%;

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    min-height:286px;

    box-shadow:
        0 18px 45px rgba(17,43,69,.07);

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}


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

.work-image{

    position:relative;

    overflow:hidden;

    background:#ECE4DC;

}

.work-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center top;

    transition:transform .8s ease;

}


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

.work-content{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    padding:38px 38px 34px;

}


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

.work-number{

    display:block;

    margin-bottom:18px;

    font-family:"Cormorant Garamond",serif;

    font-size:52px;
    line-height:1;

    color:#E8605A;

}

.work-content h3{

    margin:0 0 18px;

    font-size:28px;

    line-height:1.2;

    font-weight:500;

    color:#132B46;

}

.work-content p{

    margin:0;

    font-size:18px;

    line-height:1.65;

    color:#6A6A6A;

}


/* ==========================================================
   LINK
========================================================== */

.work-content a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:34px;

    width:max-content;

    font-size:18px;
    font-weight:500;

    color:#E8605A;

    text-decoration:none;

    transition:.35s;

}

.work-content a span{

    font-size:20px;

    transition:.35s;

}

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

.work-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 28px 65px rgba(17,43,69,.12);

}

.work-card:hover .work-image img{

    transform:scale(1.05);

}


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

.work-image::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(17,43,69,.06)
    );

    opacity:0;

    transition:opacity .45s ease;

}

.work-card:hover .work-image::after{

    opacity:1;

}


/* ==========================================================
   LINK
========================================================== */

.work-content a:hover{

    color:#132B46;

    gap:20px;

}

.work-content a:hover span{

    transform:translateX(4px);

}


/* ==========================================================
   SMOOTH TRANSITIONS
========================================================== */

.work-card,
.work-image img,
.work-image::after,
.work-content a,
.work-content a span{

    transition:all .4s ease;

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.work-content a:focus-visible{

    outline:2px solid #E8605A;

    outline-offset:5px;

    border-radius:6px;

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1280px){

.st-work{

    padding:120px 5%;

}

.st-work-top{

    grid-template-columns:1fr .75fr;

    gap:60px;

}

.st-work-header h2{

    font-size:clamp(52px,6vw,76px);

}

.work-card{

    grid-template-columns:55% 45%;

}

.work-content{

    padding:34px;

}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1024px){

.st-work{

    padding:100px 5%;

}

.st-work-top{

    grid-template-columns:1fr;

    text-align:center;

    gap:50px;

}

.st-work-header{

    max-width:700px;

    margin:auto;

}

.st-work-header span{

    justify-content:center;

}

.st-work-header span::after{

    display:none;

}

.st-work-header p{

    margin:auto;

}

.st-work-art{

    justify-content:center;

}

.st-work-art img{

    max-width:380px;

}

.st-work-grid{

    grid-template-columns:1fr;

}

.work-card{

    grid-template-columns:56% 44%;

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.st-work{

    padding:80px 24px;

}

.st-work-header h2{

    font-size:44px;

}

.st-work-header p{

    font-size:17px;

}

.st-work-art img{

    max-width:280px;

}

.st-work-grid{

    gap:24px;

}

.work-card{

    grid-template-columns:1fr;

}

.work-image{

    aspect-ratio:16/10;

}

.work-content{

    padding:28px;

}

.work-number{

    font-size:42px;

}

.work-content h3{

    font-size:24px;

}

.work-content p{

    font-size:16px;

}

.work-content a{

    margin-top:24px;

    font-size:17px;

}

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

.st-work{

    padding:70px 20px;

}

.st-work-header h2{

    font-size:38px;

}

.st-work-art img{

    max-width:220px;

}

.work-content{

    padding:24px;

}

.work-number{

    font-size:36px;

}

.work-content h3{

    font-size:22px;

}

}