/* ===========================================================================
   브레인솔루션 (/about/solution) 전용 스타일
   공통(헤더/퀵메뉴/둘러보기/푸터/토큰)은 main.css 에 있다.
   =========================================================================== */

.solution {
    padding: 153px 0 184px;
    background: url('/static/images/solution/bg.webp') no-repeat center top / cover;
    color: #fff;
}

.solution__head {
    margin-bottom: 84px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.solution__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
}

.solution__title em {
    font-style: normal;
    color: var(--c-cream);
}

/* 570 + 30 + 570 = 1170 */
.solution__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 30px;
    row-gap: 74px;
}

.solution-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 360;
    object-fit: cover;
}

.solution-card__title {
    margin-top: 48px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.solution-card__points {
    margin-top: 16px;
    padding-left: 33px;
    list-style: disc;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.9px;
}

.solution-card__points strong {
    font-weight: 700;
}

.solution-card__note {
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: -0.9px;
}

@media (max-width: 1230px) {
    .solution {
        padding: 100px 0 120px;
    }

    .solution__head {
        margin-bottom: 60px;
    }

    .solution__list {
        row-gap: 60px;
    }
}

@media (max-width: 768px) {
    .solution {
        padding: 60px 0 70px;
        /* 배경 텍스처가 세로로 길어 모바일에선 상단만 쓰고 색으로 이어받는다 */
        background-color: #2b211a;
    }

    .solution__head {
        margin-bottom: 40px;
        gap: 14px;
    }

    .solution__title {
        font-size: 28px;
    }

    .solution__list {
        grid-template-columns: 1fr;
        row-gap: 45px;
    }

    .solution-card__title {
        margin-top: 24px;
        font-size: 20px;
    }

    .solution-card__points {
        margin-top: 10px;
        padding-left: 22px;
        font-size: 16px;
        line-height: 1.7;
        letter-spacing: -0.5px;
    }

    .solution-card__note {
        font-size: 16px;
        line-height: 1.7;
        letter-spacing: -0.5px;
    }
}