.em2-content-lists{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 4px;
    overflow: hidden;
}
.em2-content-item{
    background: var(--white);
    padding: 45px 35px;
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 auto;
    width: 33.3333%;
    position: relative;
    &::before{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--gold-light));
        transform: scaleX(0);
        transition: transform 0.3s;
    }
    & .em2-title{
        font-weight: 600;
        margin-bottom: 15px;
    }
    & .subtitle{
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--wood);
        font-weight: 600;
        margin-bottom: 5px;
    }
    & .tags{
        display: flex;
        align-items: center;
        gap: 5px;
    }
    & .subtag{
        font-size: 11px;
        color: var(--wood);
        font-weight: 600;
        margin-top: 8px;
        background: var(--wood-ultra);
        padding: 5px 12px;
        border-radius: 100px;
    }
    &:hover{
        background: var(--warm-white);
        &::before{
            transform: scaleX(1);
        }
    }
}
.em2-content-item:nth-child(3n+2){
    border-left: 2px solid #e8e4dc;
    border-right: 2px solid #e8e4dc;
}
.em2-content-lists.template-style_1{
    border-radius: 0;
    gap: 4px;
    & .em2-content-item{
        width:  calc((100% - 8px) / 3);
        border: none;
        background: #1e2d42;
        color: rgba(255,255,255,.5);
        & .em2-title{
            color: var(--white);
        }
        &::after, &::before{
            display: none;
        }
        &:hover{
            background: #243050;
        }
    }
}
.em2-content-lists.template-style_2{
    border-radius: 0;
    gap: 4px;
    & .em2-content-item{
        width:  calc((100% - 8px) / 2);
        border: 1px solid rgba(255,255,255,.06);
        background: rgba(255,255,255,.03);
        color: rgba(255,255,255,.5);
        & .em2-title{
            color: var(--white);
        }
        &::after, &::before{
            display: none;
        }
        &:hover{
            background: rgba(255,255,255,.05);
            border-color: rgba(184,149,42,.25);
        }
    }
    & .number{
        font-family: var(--playfair-display);
        font-size: 72px;
        font-weight: 700;
        color: rgba(184, 149, 42, .12);
        line-height: 1;
        margin-bottom: 16px;
    }
}
.em2-content-lists.template-style_3{
    border-radius: 0;
    gap: 0px;
    & .em2-content-item{
        width: 25%;
        border: none;
        background: var(--white);
        padding: 30px 20px;
        border-right: 1px solid #e2ddd6;
        & .em2-title{
            font-size: 15px;
            font-family: var(--outfit);
            margin-bottom: 5px;
        }
        & .block-content{
            font-size: 14px;
            & p:last-child{
                margin-bottom: 0px;
            }
        }
        &::after, &::before{
            display: none;
        }
        &:nth-child(4n){
            border: none;
        }
        &:hover{
            background: var(--wood-ultra);
        }
    }
}
.em2-content-lists.template-style_4,
.em2-content-lists.template-style_5{
    display: block;
    & .em2-content-item{
        width: 100%;
        border: none;
        border-bottom: 1px solid var(--border);
        padding: 28px 0px 28px 76px;
        position: relative;
        background: transparent;
        &:last-child{
            border-bottom: none;
        }
        &:first-child{
            padding-top: 0px;
        }
        &::before{
            display: none;
        }
        & .number{
            width: 48px;
            height: 48px;
            position: absolute;
            left: 0px;
            display: inline-flex;
            background: var(--navy);
            justify-content: center;
            align-items: center;
            font-size: 20px;
            color: var(--white);
            font-family: var(--fraunces);
            border-radius: 100%;
        }
        & .em2-title{
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        & .block-content{
            font-size: 14px;
        }
        & .tag{
            font-size: 12px;
            color: var(--text-soft);
            margin-top: 8px;
            background: var(--smoke);
            border: 1px solid var(--border);
            padding: 8px 12px;
            border-radius: 6px;
            display: inline-block;
            font-weight: 400;
        }
        &:hover{
            background: none;
            padding-left: 90px;
            & .number{
                left: 12px;
                background: var(--wood);
            }
        }
    }
}
.em2-content-lists.template-style_5{
    & .em2-content-item{
        border: none;
        padding-top: 0px;
        padding-bottom: 24px;
        background: none;
        & .number{
            width: 32px;
            height: 32px;
            font-size: 14px;
            &::before{
                content: '';
                border-left: 2px dashed var(--border);
                height: 32px;
                position: absolute;
                top: 100%;
            }
        }
        &:last-child .number::before{
            display: none;
        }
        & .tag{
            color: #c0392b;
            font-weight: 600;
            background: #fdf2f1;
            border: 1px solid rgba(192, 57, 43, .2);
            padding: 3px 10px;
            border-radius: 100px;
        }
        &:hover{
            padding-left: 76px;
            & .number{
                left: 0px;
                background: var(--navy);
            }
        }
    }
}
.em2-content-lists.template-style_6{
    gap: 24px;
    padding-top: 5px;
    & .em2-content-item{
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 32px 26px;
        width:  calc((100% - 48px) / 3);
        &::before{
            display: none;
        }
        & .em2-title{
            font-family: var(--fraunces);
            font-size: 20px;
            margin-bottom: 10px;
        }
        & .block-content{
            font-size: 14px;
            color: var(--text-mid);
            line-height: 1.7;
        }
        & .tag{
            margin-top: 14px;
            font-size: 12px;
            color: var(--wood);
            font-weight: 500;
        }
        &:hover{
            border-color: var(--wood);
            box-shadow: 0 8px 32px rgba(139, 94, 60, .1);
            transform: translateY(-4px);
            background: none;
        }
    }
}
.em2-content-lists.template-style_7,
.em2-content-lists.template-style_8{
    gap: 20px;
    & .em2-content-item{
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 10px;
        padding: 32px 26px;
        width:  calc((100% - 40px) / 2);
        &::before{
            display: none;
        }
        & .em2-title{
            font-family: var(--outfit);
            font-size: 15px;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 8px;
        }
        & .block-content{
            font-size: 14px;
            color: rgba(255, 255, 255, .5);
            line-height: 1.7;
        }
        & .tag{
            margin-top: 12px;
            font-size: 12px;
            color: var(--wood-light);
            background: rgba(255, 255, 255, .04);
            padding: 8px 14px;
            border-radius: 6px;
        }
        &:hover{
            background: rgba(255, 255, 255, .1);
            border-color: rgba(139, 94, 60, .4);
        }
    }
}
.em2-content-lists.template-style_8{
    background: var(--navy);
    border-radius: 12px;
    padding: 48px 40px;
    position: relative;
    overflow: hidden;
    gap: 20px;
    & .title{
        width: 100%;
        font-family: var(--fraunces);
        font-size: 22px;
        color: var(--white);
        font-weight: 300;
        font-style: italic;
    }
    & .em2-content-item{
        width: calc((100% - 20px) / 2);
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 8px;
        padding: 24px 20px;
        & .em2-title{
            font-family: var(--fraunces);
            font-size: 36px;
            font-weight: 300;
            color: var(--wood-pale);
            line-height: 1;
            margin-bottom: 6px;
            & sub{
                font-size: 20px;
                bottom: 0;
                line-height: 20px;
            }
        }
    }
}
.em2-content-lists.template-style_9{
    gap: 0px;
    position: relative;
    &::before{
        content: '';
        position: absolute;
        top: 36px;
        left: 20px;
        right: 20px;
        height: 1px;
        background: linear-gradient(90deg, var(--wood) 0%, rgba(139, 94, 60, .2) 100%);
    }
    & .em2-content-item{
        background: none;
        border: none;
        width: 20%;
        padding: 0 20px;
        &::before{
            display: none;
        }
        & .em2-title{
            font-size: 15px;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 10px;
            line-height: 1.3;
            font-family: var(--outfit);
        }
        & .block-content{
            font-size: 14px;
            font-weight: 300;
            color: rgba(255, 255, 255, .45);
            line-height: 1.65;
        }
        & .number{
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: var(--white);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            font-family: var(--fraunces);
            font-size: 26px;
            font-weight: 300;
            color: var(--navy);
            box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
        }
        & .tag{
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(255, 255, 255, .05);
            border-radius: 6px;
            font-size: 12px;
            color: rgba(255, 255, 255, .35);
            line-height: 1.5;
        }
    }
}
.em2-content-lists.template-style_10{
    & .em2-content-item{
        background: var(--navy);
        & .em2-title{
            color: var(--white);
        }
        & .block-content{
            color: rgba(255,255,255,.45);
        }
        &:hover{
            background: var(--navy-mid);
        }
    }
}
.em2-content-lists.template-style_11{
    gap: 32px;
    & .em2-content-item{
        width: calc(25% - 24px);
        box-sizing: border-box;
        padding: 32px 28px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .07);
        border-radius: 10px;
        color: rgba(255,255,255,.45);
        & .number{
            font-family: var(--fraunces);
            font-size: 48px;
            font-weight: 300;
            color: rgba(255, 255, 255, .1);
            line-height: 1;
            margin-bottom: 16px;
        }
        & .em2-title{
            color: var(--white);
            margin-bottom: 10px;
        }
        & .tag{
            margin-top: 14px;
            font-size: 12px;
            color: var(--wood-light);
            background: rgba(255, 255, 255, .04);
            padding: 10px 14px;
            border-radius: 6px;
            line-height: 1.5;
        }
        &:hover{
            background: rgba(255, 255, 255, .09);
            border-color: rgba(184, 149, 42, .3);
        }
    }
}
.em2-content-lists.template-style_12{
    gap: 0;
    position: relative;
    &::before{
        position: absolute;
        height: 100%;
        border-right: 3px solid var(--border) !important;
        content: '';
        top: 0px;
        z-index: 2;
    }
    & .em2-content-item{
        width: 50%;
        padding: 52px 44px;
        border-radius: 0;
        border: none;
        border-top-right-radius: 12px;
        border-top: 4px solid var(--navy);
        & .tag{
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            padding: 5px 14px;
            border-radius: 100px;
            display: inline-block;
            margin-bottom: 14px;
            background: rgba(27, 42, 68, .1);
            color: var(--navy);
        }
        & .em2-title{
            color: var(--navy);
            font-size: 28px;
            font-weight: 300;
            font-family: var(--fraunces);
            margin-bottom: 10px;
        }
        & .block-content{
            font-size: 14px;
            color: var(--text-mid);
            line-height: 1.7;
            & ul{
                list-style: none;
                margin: 0px;
                padding: 0px;
            }
            & ul li{
                display: flex;
                gap: 12px;
                align-items: flex-start;
                &::before{
                    content: '·';
                }
            }
        }
        & .em2-btn--readmore{
            text-transform: none;
            font-size: 13px;
            color: var(--navy);
            font-weight: 500;
            letter-spacing: 0;
            margin-top: 20px;
        }
        &:nth-child(2n+1){
            border-top-left-radius: 12px;
            border-top-right-radius: 0px;
            position: relative;
            &:hover{
                border-color: var(--navy);
            }
        }
        &:nth-child(2n+2){
            border-color: var(--wood);
            &:hover{
                border-color: var(--wood);
            }
            & .em2-btn--readmore, & .tag{
                color: var(--wood);
            }
            & .tag{
                background: rgba(139,94,60,.12);
            }
        }
    }
}
.em2-content-lists.template-style_13{
    gap: 20px;
    & .em2-content-item{
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 10px;
        padding: 32px 24px;
        width: calc((100% - 44px)/3);
        & .em2-title{
            font-family: var(--fraunces);
            font-size: 17px;
            font-weight: 300;
            font-style: italic;
        }
        & .block-content{
            font-size: 14px;
            & strong{
                font-weight: 500;
                color: #e8d5be;
            }
        }
    }
}

@media (max-width: 768px){
    .em2-content-lists{
        display: block;
        & .em2-content-item{
            width: 100%;
            border: none;
        }
    }
    .em2-content-lists.template-style_1,
    .em2-content-lists.template-style_2,
    .em2-content-lists.template-style_3,
    .em2-content-lists.template-style_6,
    .em2-content-lists.template-style_7,
    .em2-content-lists.template-style_8,
    .em2-content-lists.template-style_9{
        & .em2-content-item{
            width: 100%;
            margin-bottom: 4px;
        }
    }
    .em2-content-lists.template-style_9{
        &::before{
            display: none;
        }
        & .em2-content-item{
            margin-bottom: 30px;
        }
    }
    .em2-content-lists.template-style_12{
        &::before{
            display: none;
        }
        & .em2-content-item{
            border-top-left-radius: 12px !important;
            border-top-right-radius: 12px !important;
        }
    }
}