/* 치료사례 */
:root {
    --category-list-padding: clamp(8px, 1vw, 12px);
    --cases-list-item-padding: clamp(10px, 1.25vw, 15px);
    --cases-info-gap: clamp(5px, 0.833vw, 10px);
}

.category-list {
    display: flex;
    align-items: center;
    margin-top: var(--mobile-content-vertical-gap-sm);
    border-bottom: 3px solid var(--color-main-03);

    & a {
        padding: var(--category-list-padding);
        border: 1px solid var(--color-line-02);
        margin-left: -1px;
        
        &.active {
            border: 1px solid var(--color-main-03);
            background-color: var(--color-main-03);
            color: var(--color-main-white);
        }
    }

    @media screen and (max-width: 400px) {
        & {font-size: var(--font-size-14);}
    }
}

.cases-list-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(var(--cases-list-item-padding) * 2);
    margin-bottom: var(--content-vertical-gap-sm);

    @media screen and (max-width: 1200px) {
        & {grid-template-columns: repeat(3, 1fr);}
    }
    @media screen and (max-width: 800px) {
        & {grid-template-columns: repeat(2, 1fr);}
    }
    @media screen and (max-width: 480px) {
        & {grid-template-columns: repeat(1, 1fr);}
    }

    & .cases-list-item {
        display: flex;
        align-items: center;
        gap: var(--cases-list-item-padding);
        padding: var(--cases-list-item-padding) 0;
        border-width: 1px 0 1px;
        border-style: solid;
        border-color: var(--color-line-02);

        & .cases-thumbnail {
            flex: 1;
            background-color: black;
            aspect-ratio: 4/3;
        }

        & .cases-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--cases-info-gap);

            & p {
                position: relative;
                padding-left: 12px;

                &::before {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 5px;
                    aspect-ratio: 1/1;
                    border-radius: 50%;
                    background-color: var(--color-main-03);
                    transform: translateY(-50%);
                    content: '';
                }
            }
        }
    }
}