.counter {
    @apply mt-8 mb-16 py-8 md:p-0 bg-gray-200 md:bg-transparent;

    .wrapper {
        @apply grid gap-4 md:gap-8;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        @screen md {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        }

        @screen lg {
            grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
        }

        .count {
            @apply relative box-border p-4 my-2 md:p-8 md:my-4 border-solid border-4 border-t-0 border-black;

            .count-top {
                @apply flex flex-row w-full absolute top-0 left-0;

                &:before {
                    content: '';
                    @apply h-1 block border-solid border-4 border-t-0 border-black;
                    flex: 1 0 0;
                }

                &:after {
                    content: '';
                    @apply h-1 block border-solid border-4 border-t-0 border-black;
                    flex: 1 0 0;
                }
            }

            .top-content {
                @apply -mt-4 md:-mt-8 text-center overflow-hidden text-lg md:text-xl font-semibold;
                flex: 0 0 70%;
            }

            .count-contents {
                @apply mt-2 md:mt-12 flex flex-col text-center;
                min-height: 140px;
                justify-content: center;
                align-items: center;
                align-content: center;

                .icon {
                    @apply text-red text-lg md:text-xl;
                    font-size: 48px;
                    line-height: 64px;
                }

                .text {
                    @apply flex justify-center items-center md:h-20 min-h-full text-sm md:text-md;
                }
            }
        }
    }
}