.about-story-intro{
    padding-top: 60px;
    padding-bottom: 60px;
    display: flex;
    gap: 60px;
    >div{
        flex: 1 0 0;
        border-left: 2px solid var(--color-gray-5);
        padding: 12px 0 12px 60px;
        >h3{
            color: var(--color-primary-2);
            margin-bottom: 24px;
            font-weight: 500;
        }
        >div{
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
    }
}
.about-story-content{
    display: flex;
    align-items: center;
    gap: 80px;
    padding: 80px 0;
    >.content{
        >p{
            margin: 40px 0;
            white-space: pre-line;
        }
    }
    >.img{
        flex-shrink: 0;
        width: calc(5 / 12 * 100%);
        >img{
            border-top-left-radius: 1000px;
            border-top-right-radius: 1000px;
        }
    }
}

@media screen and (width < 1248px) {
    .about-story-intro{
        gap: 40px;
        >div{
            padding: 12px 0 12px 40px;
        }
    }
}
@media screen and (width < 1024px) {
    .about-story-intro{
        gap: 0px;
        >div{
            padding: 12px 0 12px 20px;
        }
    }
    .about-story-content{
        gap: 24px;
    }
}
@media screen and (width < 768px) {
    .about-story-intro{
        flex-direction: column;
        gap: 24px;
    }
    .about-story-content{
        flex-direction: column;
        gap: 40px;
        >.content{
            >p{
                margin: 24px 0;
            }
        }
        >.img{
            order: -1;
            width: 100%;
            max-width: 500px;
        }
    }
}
@media screen and (width < 576px) {
    .about-story-intro{
        >div > h3{
            margin-bottom: 12px;
        }
    }
    .about-story-content{
        padding: 60px 0;
    }
}