.column { width: 350px; position: relative; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 100%; } @media screen and (min-width: 631px) { .column { flex: 0 0 auto; padding: 10px; padding-left: 5px; padding-right: 5px; &:first-child { padding-left: 10px; } &:last-child { padding-right: 10px; } } } .empty-column-indicator, .error-column { @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg; @supports (display: grid) { // hack to fix Chrome <57 contain: strict; } & > span { @apply max-w-[400px]; } a { @apply text-primary-600 dark:text-primary-400 no-underline hover:underline; } } .error-column { flex-direction: column; .svg-icon { width: 70px; height: 70px; margin-bottom: 30px; } }