.mol-service-list {
    @apply rounded-lg border-solid border overflow-hidden w-full;

    li {
        @apply grid;
        grid-template-columns: max-content auto;
        @apply first:p-0 p-8 border-b border-shade first:flex first:items-center relative;
        @apply transition-all duration-200;

        a {
            @apply absolute top-0 left-0 w-full h-full;
        }

        .icon-container {
            @apply relative;

            .atm-icon {
                @apply absolute top-1/2 left-8 transform -translate-x-1/2 -translate-y-1/2 text-h2;
                color: white !important;
            }
        }

        &:hover {
            .atm-icon {
                @apply text-secondary-col-1;
            }
            .text-content {
                .atm-heading {
                    @apply text-secondary-col-1;
                }
                .atm-icon {
                    @apply -right-1;
                }
            }
        }

        .text-content {
            @apply flex justify-between items-center relative;
            grid-area: 1/2;

            .atm-icon {
                @apply absolute text-h6 right-0;
            }
        }

        .atm-icon {
            @apply text-h4 transition-all duration-200;
        }

        .atm-heading {
            @apply mb-0 ml-3 text-black;
        }
    }

    li:last-child {
        @apply border-b-0;
    }
}