@charset "utf-8";

/* ──────────────────────────────────────────
   Mission Cards Grid
────────────────────────────────────────── */
.values {background: #fff; padding: var(--section-padding-t) var(--inner-padding-l);}

.mission-list {width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); justify-content: center; gap: 1.25rem clamp(12px, 3.125vw, 60px);}

.card {padding: 2.5rem 1.875rem; border-radius: 1.875rem; color: var(--white); text-align: center;}
.card:nth-child(odd) {background: var(--green800);}
.card:nth-child(even) {background: var(--green600);}

.index {font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 3.75rem, 60px); font-weight: 400; line-height: 0.8; letter-spacing: -0.002em; margin-bottom: 0.25em; transition: all 0.15s ease-out;}
.card:hover .index {transform: translateY(clamp(-8px, -0.14em, 0px)); color: #FFE032;}

.title-en {font-family: "Outfit", sans-serif; font-size: 1rem; font-weight: 700; line-height: 1.5; letter-spacing: 0;}

.card .top + .desc {margin-top: clamp(10px, 1.6em, 24px);}
.desc {white-space: pre-line;}

.lower-bg {width: 100%; height: auto; aspect-ratio: 1920/460; position: relative; overflow: hidden;}
.lower-bg img {width: 100%; height: 100%; object-fit: cover;}


/* 영문 */
html:lang(en) .card .title {display: none;}
/* //영문 */





@media (min-width:601px) and (max-width:1280px){
    .mission-list {grid-template-columns: repeat(6, 1fr);}
    .card:nth-child(-n+3) {grid-column: span 2;}
    .card:nth-child(4) {grid-column: 2 / span 2;}
    .card:nth-child(5) {grid-column: 4 / span 2;}
}

@media (min-width:376px) and (max-width:600px){
    .mission-list {grid-template-columns: repeat(4, 1fr);}
    .card:nth-child(-n+4) {grid-column: span 2;}
    .card:nth-child(5) {grid-column: 2 / span 2;}

    .card:nth-child(3) {background: var(--green600);}
    .card:nth-child(4) {background: var(--green800);}
    .card:nth-child(5) {background: var(--green600);}
}

@media (max-width:375px){
    .mission-list {grid-template-columns: unset;}
}