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

.hero-grid,
.yddd-hero-grid,
.nydd-hero-grid{

    display:grid;

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

    gap:18px;

    margin:30px 0;
}

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

.hero-card,
.yddd-hero-card,
.nydd-hero-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:18px;

    padding:22px;

    border-radius:28px;

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

    background:#0d0d0d;

    overflow:hidden;

    box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 14px rgba(212,175,55,.08);

    transition:
    all .3s ease;
}

/* ==================================================
   BACKGROUND IMAGE LAYER
================================================== */

.hero-card::before,
.yddd-hero-card::before,
.nydd-hero-card::before{

    content:'';

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    opacity:.5;

    z-index:0;

    pointer-events:none;
}

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

.hero-card::after,
.yddd-hero-card::after,
.nydd-hero-card::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(0,0,0,.28),
        rgba(0,0,0,.38)
    );

    z-index:1;

    pointer-events:none;
}

/* ==================================================
   CONTENT ABOVE BACKGROUND
================================================== */

.hero-card > *,
.yddd-hero-card > *,
.nydd-hero-card > *{

    position:relative;

    z-index:2;
}

/* ==================================================
   ALTERNATING IMAGE POSITION
================================================== */

.hero-grid > *:nth-child(even),
.yddd-hero-grid > *:nth-child(even),
.nydd-hero-grid > *:nth-child(even){

    flex-direction:row-reverse;
}

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

.hero-card:hover,
.yddd-hero-card:hover,
.nydd-hero-card:hover{

    transform:
    translateY(-4px);

    border-color:
    rgba(212,175,55,.28);

    box-shadow:
    0 18px 42px rgba(0,0,0,.45),
    0 0 22px rgba(212,175,55,.14);
}

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

.hero-image-wrap,
.yddd-hero-image-wrap,
.nydd-hero-image-wrap{

    width:140px;

    height:140px;

    min-width:140px;

    border-radius:50%;

    overflow:hidden;

    flex-shrink:0;

    border:
    2px solid rgba(212,175,55,.14);

    box-shadow:
    0 4px 16px rgba(0,0,0,.35);
}

.hero-image-wrap img,
.yddd-hero-image-wrap img,
.nydd-hero-image-wrap img{

    width:100%;

    height:100%;

    object-fit:cover;
}

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

.hero-content,
.yddd-hero-content,
.nydd-hero-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:10px;

    width:100%;
}

/* ==================================================
   TITLES
================================================== */

.hero-content h1,
.hero-content h2,
.hero-content h3,

.yddd-hero-content h1,
.yddd-hero-content h2,
.yddd-hero-content h3,

.nydd-hero-content h1,
.nydd-hero-content h2,
.nydd-hero-content h3{

    margin:0 0 10px 0;

    line-height:1.2;

    color:#fff;
}

/* ==================================================
   TEXT
================================================== */

.hero-content p,
.yddd-hero-content p,
.nydd-hero-content p{

    margin:0;

    line-height:1.6;

    opacity:.92;

    color:#f1f1f1;
}

/* ==================================================
   LEFT CARDS
================================================== */

.hero-card:nth-child(odd){

    text-align:left;
}

.hero-card:nth-child(odd) .hero-content{

    align-items:flex-start;

    text-align:left;
}

/* ==================================================
   RIGHT CARDS
================================================== */

.hero-card:nth-child(even){

    text-align:right;
}

.hero-card:nth-child(even) .hero-content{

    align-items:flex-end;

    text-align:right;
}

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

@media(max-width:768px){

    .hero-grid,
    .yddd-hero-grid,
    .nydd-hero-grid{

        grid-template-columns:1fr;
    }

    .hero-card,
    .yddd-hero-card,
    .nydd-hero-card{

        padding:16px;

        gap:14px;

        flex-direction:row !important;

        align-items:center !important;

        text-align:left !important;

        border-radius:22px;
    }

    .hero-content,
    .yddd-hero-content,
    .nydd-hero-content{

        align-items:flex-start !important;

        text-align:left !important;
    }

    .hero-image-wrap,
    .yddd-hero-image-wrap,
    .nydd-hero-image-wrap{

        width:80px;

        height:80px;

        min-width:80px;
    }

    .hero-content h1,
    .hero-content h2,
    .hero-content h3{

        font-size:20px;
    }

    .hero-content p{

        font-size:13px;

        line-height:1.4;
    }
}