/* =========================================================
   EVENT SECTION
========================================================= */

.event-section{

    position:relative;

    width:100%;

    padding:

        78px
        20px
        90px;

    background:#fff;

    overflow:hidden;

}


/* =========================================================
   CONTAINER
========================================================= */

.event-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

}


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

.event-header{

    text-align:center;

    margin-bottom:34px;

}


/* 작은 영문 */

.event-label{

    display:block;

    margin-bottom:10px;

    color:#a7836b;

    font-family:
        Arial,
        sans-serif;

    font-size:12px;

    font-weight:700;

    line-height:1;

    letter-spacing:.4px;

}


/* 메인 제목 */

.event-title{

    margin:0;

    color:#2c2521;

    font-size:31px;

    font-weight:600;

    line-height:1.35;

    letter-spacing:-1.8px;

}


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

.event-grid{

    display:grid;

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

    gap:7px;

}


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

.event-card{

    position:relative;

    min-width:0;

    background:#fff;

    border:1px solid #eee9e5;

    border-radius:5px;

    overflow:hidden;

    box-shadow:
        0 3px 12px
        rgba(50,35,25,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}


.event-card:hover{

    transform:
        translateY(-7px);

    box-shadow:
        0 14px 35px
        rgba(50,35,25,.13);

}


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

.event-image{

    position:relative;

    width:100%;

    height:180px;

    overflow:hidden;

    background:#eee;

}


/* 이미지 */

.event-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:

        transform .55s
        cubic-bezier(.2,.7,.2,1),

        filter .45s ease;

}


/* hover 이미지 */

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

    transform:scale(1.07);

    filter:
        brightness(.88);

}


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

.event-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,.08) 100%
        );

    pointer-events:none;

}


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

.event-content{

    min-height:160px;

    padding:

        20px
        18px
        22px;

    background:#fff;

}


/* =========================================================
   CATEGORY
========================================================= */

.event-category{

    display:block;

    margin-bottom:8px;

    color:#a7836b;

    font-family:
        Arial,
        sans-serif;

    font-size:10px;

    font-weight:600;

    line-height:1.2;

    letter-spacing:.35px;

}


/* =========================================================
   EVENT NAME
========================================================= */

.event-name{

    margin:0;

    color:#332a25;

    font-size:18px;

    font-weight:600;

    line-height:1.35;

    letter-spacing:-.9px;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.event-description{

    margin-top:10px;

    color:#81766f;

    font-size:14px;

    font-weight:400;

    line-height:1.75;

    letter-spacing:-.35px;

}


/* =========================================================
   MORE ARROW
========================================================= */

.event-more{

    display:inline-flex;

    align-items:center;

    margin-top:14px;

    color:#a7836b;

    font-family:
        Arial,
        sans-serif;

    font-size:9px;

    font-weight:600;

    text-decoration:none;

    opacity:0;

    transform:
        translateY(5px);

    transition:

        opacity .3s ease,

        transform .3s ease;

}


.event-card:hover
.event-more{

    opacity:1;

    transform:
        translateY(0);

}


.event-more-arrow{

    margin-left:5px;

    font-size:12px;

    transition:
        transform .3s ease;

}


.event-more:hover
.event-more-arrow{

    transform:
        translateX(4px);

}


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

.event-number{

    position:absolute;

    right:15px;

    top:15px;

    z-index:3;

    width:27px;

    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:#765746;

    font-family:
        Arial,
        sans-serif;

    font-size:9px;

    font-weight:600;

    box-shadow:
        0 3px 8px
        rgba(0,0,0,.08);

}


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

.event-card{

    cursor:pointer;

}


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

@media(max-width:1050px){

    .event-section{

        padding:

            65px
            25px
            75px;

    }


    .event-title{

        font-size:28px;

    }


    .event-grid{

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

        gap:14px;

    }


    .event-image{

        height:210px;

    }


    .event-content{

        min-height:150px;

    }

}


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

@media(max-width:650px){

    .event-section{

        padding:

            55px
            18px
            65px;

    }


    .event-header{

        margin-bottom:25px;

    }


    .event-label{

        font-size:10px;

        margin-bottom:9px;

    }


    .event-title{

        font-size:25px;

        letter-spacing:-1.3px;

    }


    .event-grid{

        grid-template-columns:
            1fr;

        gap:14px;

    }


    .event-card{

        display:grid;

        grid-template-columns:
            43% 57%;

        min-height:160px;

    }


    .event-image{

        height:100%;

        min-height:160px;

    }


    .event-content{

        min-height:160px;

        padding:

            22px
            18px;

    }


    .event-category{

        font-size:9px;

    }


    .event-name{

        font-size:17px;

    }


    .event-description{

        margin-top:8px;

        font-size:10px;

        line-height:1.65;

    }


    .event-more{

        display:none;

    }


    .event-number{

        right:auto;

        left:10px;

        top:10px;

        width:24px;

        height:24px;

        font-size:8px;

    }

}


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

@media(max-width:400px){

    .event-section{

        padding-left:14px;
        padding-right:14px;

    }


    .event-title{

        font-size:23px;

    }


    .event-card{

        grid-template-columns:
            42% 58%;

    }


    .event-image{

        min-height:150px;

    }


    .event-content{

        min-height:150px;

        padding:

            18px
            14px;

    }


    .event-name{

        font-size:15px;

    }


    .event-description{

        font-size:9px;

    }

}