@font-face {
    font-family: 'D-DIN DIN-Bold';
    font-style: normal;
    font-weight: normal;
    src: local('D-DIN DIN-Bold'), url('../font/D-DIN-Bold.woff') format('woff');
}

:root {
    --background: #000;
    --component01: #111;
    --component02: #222;
    --text01: #FFF;
    --text02: #AAA;
    --button: rgba(0, 0, 0, 0.5);
    --border: 1px solid #555; 
}

.content04 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 3fr);
    background: url(../img/section04/texture.jpg) no-repeat center;
    background-size: cover;
}

.CardContainer {
    width: 100%;
    position: relative;
    perspective: 1000px;
    border: var(--border);
}

.CardBox {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    background: linear-gradient( 45deg, #0006 40%, #0009 60%);
}

.CardContainer:hover .CardBox {
    transform: rotateY(180deg); /* 호버 시 플립 */
}

.CardBox div {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CardFront {
    font-family: 'D-DIN DIN-Bold';
    font-size: 128px;
    font-weight: 700;
    color: var(--text01);
    backdrop-filter: blur(50px);
}

.CardBack {
    transform: rotateY(180deg); /* 뒷면을 회전 */
}

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

@media screen and (max-width: 768px) {

    .grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 6fr);
    }
    
    .CardContainer {
        width: 100%;
        border: var(--border);
    }

    .CardFront {
        font-family: 'D-DIN DIN-Bold';
        font-size: 48px;
        font-weight: 700;
        color: var(--text01);
        backdrop-filter: blur(50px);
    }
}