.atm-table {
    .table-view {
        @apply hidden md:block w-full;

        table {
            @apply w-full;
            @apply bg-white;
            @apply border-solid border-l border-t border-shade;

            tr {
                th {
                    @apply bg-cta text-white;
                    @apply p-4;
                    @apply font-normal text-left;
                    @apply border-solid border-r border-b border-shade;
                }

                .head {
                    @apply align-top;
                    @apply bg-cta-100 text-gray;
                    @apply border-solid border-r border-b border-shade;
                }

                td {
                    @apply p-4;
                    @apply align-top;
                    @apply border-solid border-r border-b border-shade;
                }

                &:hover {
                    @apply cursor-pointer;
                    @apply bg-cta-100;
                }
            }
        }
    }

    .list-view {
        @apply md:hidden;

        ul {
            li {
                span {
                    @apply mb-4;
                    @apply block;
                    @apply text-left;
                }

                &:not(:last-child) {
                    @apply mb-4;
                }

                dl {
                    @apply flex flex-wrap;

                    dt {
                        @apply p-4;
                        @apply w-2/6;
                        @apply font-normal text-left;
                        @apply bg-cta text-white;
                        @apply border-solid border-b border-l border-shade;
                        @apply first:border-t;
                    }

                    dd {
                        @apply p-4;
                        @apply w-4/6;
                        @apply border-solid border-t border-l border-r border-shade;
                        @apply last:border-b;
                    }
                }
            }
        }
    }
}