@import "../component-navigation/style.css";

.tax-service-list{
    padding-top: 80px;
    padding-bottom: 80px;
}
.tax-service-list-grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0px 24px;
    margin-bottom: -60px;
}
.tax-service-list-card{
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    margin-bottom: 60px;

    >.img{
        aspect-ratio: 16 / 9;
        margin-bottom: 24px;
        overflow: hidden;
        border-radius: 10px;
        >img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s;
        }
    }
    > h3{
        text-align: center;
        margin-bottom: 12px;
        transition: color 0.3s;
    }
    > p{
        color: var(--color-gray-2);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    &:hover{
        >.img > img{
            transform: scale(1.1);
        }
        > h3{
            color: var(--color-primary-2);
        }
    }
}

@media screen and (width < 576px) {
    .tax-service-list{
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .tax-service-list-grid{
        margin-bottom: -40px;
    }
    .tax-service-list-card{
        margin-bottom: 40px;
    }
}