.home-company{
    padding-top: 60px;
    padding-bottom: 60px;
    >.title{
        position: relative;
        z-index: 1;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
        >img{
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 20px;
        }
        >h2{
            color: white;
        }
    }

    >.list{
        gap: 24px;
        >div{
            >div{
                margin-bottom: 4px;
                padding: 12px 24px;
                border-radius: 10px;
                background-color: var(--color-gray-7);
            }
            >div.dropdown{
                >.title{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: var(--color-gray-1);
                    cursor: pointer;
                    transition: color .5s;
                    &:hover{
                        color: var(--color-primary-1);
                    }
                    >h4, >svg{
                        color: inherit;
                    }
                    >svg .line{
                        transform-origin: center;
                        transition: transform .5s;
                    }
                }
                >.content{
                    display: grid;
                    grid-template-rows: 0fr;
                    transition: grid-template-rows .5s;
                    >div{
                        overflow: hidden;
                        >div{
                            padding-top: 16px;
                            display: flex;
                            flex-direction: column;
                            gap: 8px;
                        }
                    }
                }

                &.active{
                    >.title{
                        color: var(--color-primary-1);
                        >svg .line{
                            transform: rotate(90deg);
                        }
                    }
                    >.content{
                        grid-template-rows: 1fr;
                    }
                }
            }
            >div:last-child{
                margin-bottom: 0;
            }
        }

        &.list-col-3{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }
        &.list-col-2{
            grid-template-columns: repeat(2, 1fr);
            display: none;
        }
        &.list-col-1{
            grid-template-columns: repeat(1, 1fr);
            display: none;
        }
    }
}

@media screen and (width < 1024px) {
    .home-company > .list{
        &.list-col-3{
            display: none;
        }
        &.list-col-2{
            display: grid;
        }
        &.list-col-1{
            display: none;
        }
    }
}

@media screen and (width < 576px) {
    .home-company > .list{
        &.list-col-3{
            display: none;
        }
        &.list-col-2{
            display: none;
        }
        &.list-col-1{
            display: grid;
        }
    }
}