/* =========================================
   PORTFOLIO PAGE
========================================= */

*{
box-sizing:border-box;
}

body{
background:#0b0b0b;
overflow-x:hidden;
}


/* =========================================
   NAVBAR
========================================= */

.nav-links a.active{
color:#ff4fa3;
}


/* =========================================
   HERO
========================================= */

.portfolio-hero{

height:calc(100vh - 95px);

min-height:650px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background-image:url('../assets/images/portfolio/ayesha1.jpg');

background-size:cover;

background-position:center;

overflow:hidden;

}


.portfolio-hero::before{

content:"";

position:absolute;

width:600px;

height:600px;

background:rgba(255,79,163,0.12);

border-radius:50%;

filter:blur(100px);

animation:heroGlow 5s ease-in-out infinite alternate;

}


@keyframes heroGlow{

from{
transform:translate(-100px,-30px);
}

to{
transform:translate(100px,30px);
}

}


.portfolio-hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
to bottom,
rgba(0,0,0,0.35),
rgba(0,0,0,0.72)
);

}


.portfolio-hero-content{

position:relative;

z-index:2;

padding:20px;

animation:heroAppear 1.3s ease forwards;

}


@keyframes heroAppear{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}


.hero-small{

font-size:13px;

letter-spacing:5px;

color:#ff4fa3;

font-weight:600;

}


.portfolio-hero h1{

font-size:clamp(70px,12vw,160px);

line-height:.9;

letter-spacing:12px;

margin:20px 0 10px;

color:white;

text-shadow:
0 0 20px rgba(255,255,255,.2),
0 0 50px rgba(255,79,163,.35);

}


.portfolio-hero h2{

font-size:clamp(20px,3vw,38px);

font-weight:400;

letter-spacing:8px;

color:#ff4fa3;

margin-bottom:15px;

}


.portfolio-hero p{

font-size:18px;

letter-spacing:3px;

color:#eee;

margin-bottom:35px;

}


.hire-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 30px;

border-radius:40px;

background:#ff4fa3;

color:white;

text-decoration:none;

font-size:16px;

font-weight:600;

box-shadow:0 10px 35px rgba(255,79,163,.35);

transition:.35s;

}


.hire-btn:hover{

transform:translateY(-5px);

background:#ff2c8f;

box-shadow:0 15px 45px rgba(255,79,163,.55);

}


.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

z-index:2;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:10px;

letter-spacing:3px;

color:#ddd;

animation:scrollFloat 2s infinite;

}


.scroll-indicator i{

color:#ff4fa3;

font-size:16px;

}


@keyframes scrollFloat{

0%,100%{
transform:translate(-50%,0);
}

50%{
transform:translate(-50%,8px);
}

}


/* =========================================
   ABOUT MODEL
========================================= */

.model-about{

max-width:1200px;

margin:auto;

padding:120px 30px;

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}


.model-about-image{

position:relative;

}


.model-about-image::after{

content:"";

position:absolute;

inset:20px -20px -20px 20px;

border:1px solid #ff4fa3;

z-index:-1;

}


.model-about-image img{

width:100%;

height:650px;

object-fit:cover;

display:block;

border-radius:3px;

}


.model-about-content{

padding:20px;

}


.section-label{

color:#ff4fa3;

font-size:13px;

letter-spacing:4px;

font-weight:600;

}


.model-about-content h2{

font-size:60px;

margin:15px 0 25px;

font-weight:600;

}


.model-about-content p{

color:#bbb;

font-size:16px;

line-height:1.9;

margin-bottom:20px;

text-align:justify;

}


.explore-btn{

display:inline-flex;

gap:12px;

align-items:center;

margin-top:15px;

color:#ff4fa3;

text-decoration:none;

font-weight:600;

transition:.3s;

}


.explore-btn:hover{

gap:20px;

}


/* =========================================
   GALLERY
========================================= */

.portfolio-gallery-section{

padding:120px 5%;

background:#101010;

}


.section-heading{

text-align:center;

margin-bottom:50px;

}


.section-heading span{

color:#ff4fa3;

font-size:12px;

letter-spacing:5px;

font-weight:600;

}


.section-heading h2{

font-size:55px;

margin:12px 0;

}


.section-heading p{

color:#999;

}


/* FILTER */

.portfolio-filter{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:12px;

margin-bottom:50px;

}


.filter-btn{

border:1px solid #333;

background:transparent;

color:#bbb;

padding:10px 22px;

border-radius:30px;

cursor:pointer;

font-family:inherit;

transition:.3s;

}


.filter-btn:hover,
.filter-btn.active{

background:#ff4fa3;

border-color:#ff4fa3;

color:white;

}


/* =========================================
   PORTFOLIO GALLERY
========================================= */

.portfolio-grid{
    max-width:1300px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-template-rows:280px 280px;
    gap:18px;
}

/* =========================================
   4 VERTICAL engagement IMAGES
========================================= */

.engagement-row{
    max-width:1300px;
    width:100%;
    margin:0 auto 18px;

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

    gap:18px;
}


.engagement-vertical{

    height:500px;

    position:relative;

    overflow:hidden;

    background:#151515;

    cursor:pointer;

}


.engagement-vertical img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:
        transform .7s ease,
        filter .7s ease;

}


/* HOVER */

.engagement-vertical:hover img{

    transform:scale(1.06);

    filter:brightness(.6);

}


/* OVERLAY */

.engagement-vertical .portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    opacity:0;

    transition:opacity .4s ease;

}


.engagement-vertical:hover .portfolio-overlay{

    opacity:1;

}


/* =========================================
   4 VERTICAL ecommerce IMAGES
========================================= */

.ecommerce-row{
    max-width:1300px;
    width:100%;
    margin:20px auto 18px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}


.profile-vertical{

    height:500px;

    position:relative;

    overflow:hidden;

    background:#151515;

    cursor:pointer;

}


.profile-vertical img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:
        transform .7s ease,
        filter .7s ease;

}


/* HOVER */

.profile-vertical:hover img{

    transform:scale(1.06);

    filter:brightness(.6);

}


/* OVERLAY */

.profile-vertical .portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    opacity:0;

    transition:opacity .4s ease;

}


.profile-vertical:hover .portfolio-overlay{

    opacity:1;

}


/*************************************/
.casual-vertical{

    height:500px;

    position:relative;

    overflow:hidden;

    background:#151515;

    cursor:pointer;

}


.casual-vertical img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:
        transform .7s ease,
        filter .7s ease;

}


/* HOVER */

.casual-vertical:hover img{

    transform:scale(1.06);

    filter:brightness(.6);

}


/* OVERLAY */

.casual-vertical .portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    opacity:0;

    transition:opacity .4s ease;

}


.casual-vertical:hover .portfolio-overlay{

    opacity:1;

}
/* =========================================*/

/* =========================================
   ALL PORTFOLIO ITEMS
========================================= */

.portfolio-item{

    position:relative;

    overflow:hidden;

    background:#151515;

    cursor:pointer;

    min-width:0;

}


.portfolio-item img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:
        transform .7s ease,
        filter .7s ease;

}


/* =========================================
   engagement - 6 IMAGE LAYOUT

   BIG | SMALL | SMALL | BIG
   BIG | SMALL | SMALL | BIG
========================================= */


/* LEFT BIG */

.portfolio-item:nth-child(1){

    grid-column:1;

    grid-row:1 / span 2;

}


/* CENTER SMALL 1 */

.portfolio-item:nth-child(2){

    grid-column:2;

    grid-row:1;

}


/* CENTER SMALL 2 */

.portfolio-item:nth-child(3){

    grid-column:3;

    grid-row:1;

}


/* CENTER SMALL 3 */

.portfolio-item:nth-child(4){

    grid-column:2;

    grid-row:2;

}


/* CENTER SMALL 4 */

.portfolio-item:nth-child(5){

    grid-column:3;

    grid-row:2;

}


/* RIGHT BIG */

.portfolio-item:nth-child(6){

    grid-column:4;

    grid-row:1 / span 2;

}

/* =========================================
   CENTER 4 IMAGE POSITION CONTROL
========================================= */

/* IMAGE 2 */
.portfolio-item:nth-child(1) img{
    object-position:40%
}
.portfolio-item:nth-child(2) img{
    object-position:65% 50%;
}

/* IMAGE 3 */
.portfolio-item:nth-child(3) img{
    object-position:10% 50%;
}

/* IMAGE 4 */
.portfolio-item:nth-child(4) img{
    object-position:center 80%;
}

/* IMAGE 5 */
.portfolio-item:nth-child(5) img{
    object-position:center 100%;
}
/* IMAGE 6 */
.portfolio-item:nth-child(6) img{
    object-position:center 25%;
}


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

.portfolio-item:hover img{

    transform:scale(1.06);

    filter:brightness(.6);

}


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

.portfolio-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
        linear-gradient(
            to bottom,
            transparent 15%,
            rgba(0,0,0,.88)
        );

    opacity:0;

    transition:opacity .4s ease;

}


.portfolio-item:hover .portfolio-overlay{

    opacity:1;

}


.portfolio-overlay span{

    color:#ff4fa3;

    font-size:11px;

    letter-spacing:4px;

    font-weight:600;

}


.portfolio-overlay h3{

    color:white;

    font-size:22px;

    margin:8px 0 15px;

}


.portfolio-overlay i{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.8);

    border-radius:50%;

    color:white;

    font-size:16px;

}


/* =========================================
   FILTER ANIMATION
========================================= */
/* FILTER HIDE */

.portfolio-item.hide,
.engagement-vertical.hide,
.profile-vertical.hide,
.casual-vertical.hide{
    display:none !important;
}

.portfolio-item.hide{

    display:none;

}


.portfolio-item.show{

    animation:galleryShow .5s ease forwards;

}


@keyframes galleryShow{

    from{

        opacity:0;

        transform:scale(.94);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* =========================================================
   FILTERED DESKTOP LAYOUT
   Vertical = 2 rows
   Horizontal = 1 row
========================================================= */


/* BRIDAL */

.portfolio-grid[data-active-filter="bridal"]{

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

    grid-template-rows:280px 280px;

    gap:18px;

}


.portfolio-grid[data-active-filter="bridal"]
.portfolio-item:nth-child(1){

    grid-column:1;

    grid-row:1 / span 2;

    height:578px;

}


.portfolio-grid[data-active-filter="bridal"]
.portfolio-item:nth-child(2){

    grid-column:2;

    grid-row:1;

    height:280px;

}


.portfolio-grid[data-active-filter="bridal"]
.portfolio-item:nth-child(3){

    grid-column:2;

    grid-row:2;

    height:280px;

}


/* GLAM */

.portfolio-grid[data-active-filter="glam"]{

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

    grid-template-rows:280px 280px;

    gap:18px;

}


.portfolio-grid[data-active-filter="glam"]
.portfolio-item:nth-child(4){

    grid-column:1;

    grid-row:1;

    height:280px;

}


.portfolio-grid[data-active-filter="glam"]
.portfolio-item:nth-child(5){

    grid-column:1;

    grid-row:2;

    height:280px;

}


.portfolio-grid[data-active-filter="glam"]
.portfolio-item:nth-child(6){

    grid-column:2;

    grid-row:1 / span 2;

    height:578px;

}

.portfolio-grid[data-active-filter="bridal"]
.portfolio-item:nth-child(1) img,
.portfolio-grid[data-active-filter="glam"]
.portfolio-item:nth-child(6) img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.portfolio-grid[data-active-filter="bridal"]
.portfolio-item:nth-child(2) img,
.portfolio-grid[data-active-filter="bridal"]
.portfolio-item:nth-child(3) img,
.portfolio-grid[data-active-filter="glam"]
.portfolio-item:nth-child(4) img,
.portfolio-grid[data-active-filter="glam"]
.portfolio-item:nth-child(5) img{

    width:100%;
    height:100%;
    object-fit:cover;

}

/* =========================================
   AVAILABLE
========================================= */

.available-section{

padding:120px 7%;

text-align:center;

}


.available-heading span{

color:#ff4fa3;

font-size:12px;

letter-spacing:4px;

}


.available-heading h2{

font-size:55px;

margin:12px 0;

}


.available-heading p{

color:#999;

max-width:600px;

margin:auto;

line-height:1.7;

}


.available-grid{

max-width:1200px;

margin:60px auto 0;

display:grid;

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

gap:20px;

}


.available-card{

padding:40px 25px;

background:#151515;

border:1px solid #252525;

transition:.4s;

}


.available-card i{

font-size:30px;

color:#ff4fa3;

margin-bottom:20px;

}


.available-card h3{

margin-bottom:12px;

}


.available-card p{

font-size:14px;

color:#999;

line-height:1.7;

}


.available-card:hover{

transform:translateY(-10px);

border-color:#ff4fa3;

box-shadow:0 15px 35px rgba(255,79,163,.12);

}


/* =========================================
   HIRE CTA
========================================= */

.hire-section{

min-height:500px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:80px 20px;

position:relative;

overflow:hidden;

background:
radial-gradient(
circle at center,
rgba(255,79,163,.16),
transparent 60%
);

}


.hire-content{

position:relative;

z-index:2;

}


.hire-content span{

font-size:12px;

letter-spacing:5px;

color:#ff4fa3;

}


.hire-content h2{

font-size:clamp(40px,6vw,75px);

line-height:1.05;

margin:20px 0;

}


.hire-content p{

color:#aaa;

margin-bottom:30px;

}


.hire-main-btn{

display:inline-flex;

align-items:center;

gap:12px;

background:#ff4fa3;

color:white;

padding:16px 35px;

border-radius:40px;

text-decoration:none;

font-weight:600;

box-shadow:0 10px 40px rgba(255,79,163,.35);

transition:.35s;

}


.hire-main-btn:hover{

transform:scale(1.05);

box-shadow:0 15px 50px rgba(255,79,163,.5);

}


/* =========================================
   LIGHTBOX
========================================= */

.lightbox{

position:fixed;

inset:0;

background:rgba(0,0,0,.96);

z-index:5000;

display:none;

align-items:center;

justify-content:center;

padding:50px;

}


.lightbox.active{

display:flex;

animation:lightboxIn .3s ease;

}


@keyframes lightboxIn{

from{
opacity:0;
}

to{
opacity:1;
}

}


.lightbox img{

max-width:85vw;

max-height:90vh;

object-fit:contain;

}


.lightbox button{

position:absolute;

border:0;

background:rgba(255,255,255,.1);

color:white;

cursor:pointer;

width:50px;

height:50px;

border-radius:50%;

font-size:20px;

transition:.3s;

}


.lightbox button:hover{

background:#ff4fa3;

}


.lightbox-close{

top:30px;

right:30px;

}


.lightbox-prev{

left:30px;

top:50%;

transform:translateY(-50%);

}


.lightbox-next{

right:30px;

top:50%;

transform:translateY(-50%);

}

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

@media (max-width:768px){

    /* =====================================================
       HERO
    ===================================================== */

    .portfolio-hero{
        height:calc(100vh - 75px);
        min-height:600px;
        background-position:center top;
    }

    .portfolio-hero::before{
        width:350px;
        height:350px;
        filter:blur(70px);
    }

    .portfolio-hero-content{
        width:100%;
        padding:20px 15px;
    }

    .hero-small{
        font-size:10px;
        letter-spacing:3px;
    }

    .portfolio-hero h1{
        font-size:clamp(55px,18vw,90px);
        line-height:.9;
        letter-spacing:5px;
        margin:15px 0 8px;
    }

    .portfolio-hero h2{
        font-size:20px;
        letter-spacing:4px;
        margin-bottom:12px;
    }

    .portfolio-hero p{
        font-size:13px;
        letter-spacing:1.5px;
        line-height:1.6;
        margin-bottom:25px;
    }

    .hire-btn{
        padding:13px 22px;
        font-size:14px;
    }

    .scroll-indicator{
        bottom:20px;
        font-size:8px;
        letter-spacing:2px;
    }


    /* =====================================================
       MEET THE MODEL
    ===================================================== */

    .model-about{
        display:flex;
        flex-direction:column;
        gap:45px;
        padding:70px 20px;
        width:100%;
    }

    .model-about-image{
        width:100%;
    }

    .model-about-image img{
        width:100%;
        height:500px;
        object-fit:cover;
        display:block;
    }

    .model-about-image::after{
        inset:15px -10px -15px 10px;
    }

    .model-about-content{
        width:100%;
        padding:0;
    }

    .section-label{
        font-size:11px;
        letter-spacing:3px;
    }

    .model-about-content h2{
        font-size:40px;
        line-height:1.1;
        margin:12px 0 20px;
    }

    .model-about-content p{
        font-size:14px;
        line-height:1.8;
        text-align:left;
        margin-bottom:18px;
    }

    .explore-btn{
        font-size:14px;
        margin-top:5px;
    }


    /* =====================================================
       PORTFOLIO SECTION
    ===================================================== */

    .portfolio-gallery-section{
        padding:70px 15px;
    }

    .section-heading{
        margin-bottom:35px;
    }

    .section-heading span{
        font-size:10px;
        letter-spacing:3px;
    }

    .section-heading h2{
        font-size:36px;
        line-height:1.1;
        margin:10px 0;
    }

    .section-heading p{
        font-size:13px;
        line-height:1.6;
    }


    /* =====================================================
       FILTER BUTTONS
    ===================================================== */

    .portfolio-filter{
        gap:8px;
        margin-bottom:35px;
    }

    .filter-btn{
        padding:8px 15px;
        font-size:12px;
    }


    /* =====================================================
       ENGAGEMENT
       2 x 2
    ===================================================== */

    .engagement-row{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        margin:0 auto 20px;
    }

    .engagement-vertical{
        height:320px;
    }

    .engagement-vertical img{
        width:100%;
        height:100%;
        object-fit:cover;
    }


    /* =====================================================
       BRIDAL + GLAM
    ===================================================== */

    .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:
            240px
            240px
            240px
            240px;
        gap:10px;
    }


    /* BRIDAL
       BIG LEFT
       2 SMALL RIGHT
    */

    .portfolio-grid .portfolio-item:nth-child(1){
        grid-column:1;
        grid-row:1 / span 2;
        height:490px;
    }

    .portfolio-grid .portfolio-item:nth-child(2){
        grid-column:2;
        grid-row:1;
        height:240px;
    }

    .portfolio-grid .portfolio-item:nth-child(3){
        grid-column:2;
        grid-row:2;
        height:240px;
    }


    /* GLAM
       2 SMALL LEFT
       BIG RIGHT
    */

    .portfolio-grid .portfolio-item:nth-child(4){
        grid-column:1;
        grid-row:3;
        height:240px;
    }

    .portfolio-grid .portfolio-item:nth-child(5){
        grid-column:1;
        grid-row:4;
        height:240px;
    }

    .portfolio-grid .portfolio-item:nth-child(6){
        grid-column:2;
        grid-row:3 / span 2;
        height:490px;
    }


    /* =====================================================
       CASUAL + PROFILE
    ===================================================== */

    .ecommerce-row{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
        margin:20px auto 18px;
    }

    .casual-vertical,
    .profile-vertical{
        height:320px;
    }

    .casual-vertical img,
    .profile-vertical img{
        width:100%;
        height:100%;
        object-fit:cover;
    }


    /* =====================================================
       PORTFOLIO OVERLAY
    ===================================================== */

    .portfolio-overlay h3{
        font-size:16px;
        text-align:center;
    }

    .portfolio-overlay span{
        font-size:9px;
        letter-spacing:2px;
    }

    .portfolio-overlay i{
        width:38px;
        height:38px;
        font-size:13px;
    }


    /* =====================================================
       AVAILABLE FOR
    ===================================================== */

    .available-section{
        padding:70px 20px;
    }

    .available-heading span{
        font-size:10px;
        letter-spacing:3px;
    }

    .available-heading h2{
        font-size:38px;
        line-height:1.1;
        margin:10px 0 15px;
    }

    .available-heading p{
        font-size:13px;
        line-height:1.7;
        max-width:100%;
    }

    .available-grid{
        margin:40px auto 0;
        grid-template-columns:1fr;
        gap:15px;
    }

    .available-card{
        padding:30px 20px;
    }

    .available-card i{
        font-size:26px;
        margin-bottom:15px;
    }

    .available-card h3{
        font-size:18px;
        margin-bottom:8px;
    }

    .available-card p{
        font-size:13px;
        line-height:1.7;
    }


    /* =====================================================
       HIRE CTA
    ===================================================== */

    .hire-section{
        min-height:450px;
        padding:70px 20px;
    }

    .hire-content{
        width:100%;
    }

    .hire-content span{
        font-size:10px;
        letter-spacing:3px;
    }

    .hire-content h2{
        font-size:40px;
        line-height:1.1;
        margin:18px 0;
    }

    .hire-content p{
        font-size:14px;
        line-height:1.7;
        margin-bottom:25px;
    }

    .hire-main-btn{
        padding:14px 25px;
        font-size:14px;
    }


    /* =====================================================
       LIGHTBOX
    ===================================================== */

    .lightbox{
        padding:20px;
    }

    .lightbox img{
        max-width:92vw;
        max-height:80vh;
    }

    .lightbox button{
        width:42px;
        height:42px;
        font-size:16px;
    }

    .lightbox-close{
        top:15px;
        right:15px;
    }

    .lightbox-prev{
        left:10px;
    }

    .lightbox-next{
        right:10px;
    }

}

@media (max-width:768px){

    /* =========================
       GLAM FILTER ONLY
    ========================= */

    .portfolio-grid[data-active-filter="glam"]
    .portfolio-item:nth-child(4){

        grid-column:1;
        grid-row:1;
        height:240px;

    }

    .portfolio-grid[data-active-filter="glam"]
    .portfolio-item:nth-child(5){

        grid-column:1;
        grid-row:2;
        height:240px;

    }

    .portfolio-grid[data-active-filter="glam"]
    .portfolio-item:nth-child(6){

        grid-column:2;
        grid-row:1 / span 2;
        height:490px;

    }


    /* =========================
       BRIDAL FILTER ONLY
    ========================= */

    .portfolio-grid[data-active-filter="bridal"]
    .portfolio-item:nth-child(1){

        grid-column:1;
        grid-row:1 / span 2;
        height:490px;

    }

    .portfolio-grid[data-active-filter="bridal"]
    .portfolio-item:nth-child(2){

        grid-column:2;
        grid-row:1;
        height:240px;

    }

    .portfolio-grid[data-active-filter="bridal"]
    .portfolio-item:nth-child(3){

        grid-column:2;
        grid-row:2;
        height:240px;

    }

}

/* HIDE PORTFOLIO FILTER BUTTONS */

.portfolio-filter{
    display:none !important;
}