.block-stats{ --block-stats-bg: theme(colors.white); --block-stats-color: theme(colors.black); --block-stats-row-border: theme(colors.black); /* --block-stats-bg: #0066FF; --block-stats-color: #fff; */ /* --block-stats-row-border: #fff; */ background: var(--block-stats-bg); color: var(--block-stats-color); &-row{ border-top: 1px solid var(--block-stats-row-border); @apply grid gap-x-[calc(var(--grid-gutter)*2)] lg:grid-cols-4 pt-sm; &:not(:last-child){ @apply pb-lg; } &__title{ @apply font-bold text-size-md; } } &__data{ grid-column: span 3; @apply mt-sm lg:mt-0; } &__subrow{ @apply grid gap-x-[calc(var(--grid-gutter)*2)] md:grid-cols-3 pt-sm; &:first-child{ @apply pt-0; } &:first-child:last-child{ @apply pb-md md:pb-lg; } + .block-stats__subrow{ @screen lg{ grid-column: 2/5; } .block-stats-column{ border-top: 1px solid var(--block-stats-row-border); @apply pt-base; } } } &-column{ @apply pb-xs; &:not(:last-child){ border-bottom: 1px solid var(--block-stats-row-border); } &__number{ @apply block text-size-3xl; } &__content{ @apply text-size-md; } &:not(:first-child){ .block-stats-column{ &__number{ @apply text-size-lg; } &__content{ @apply text-size-sm; } } } } }