.home {
    padding-top: 52px;

    .header {
        @apply .rounded-t-none !important;
    }

    .section {
        @apply .relative .z-10 .py-20;

        &.less-padding {
            @apply .py-12;
        }

        .container {
            @apply .px-8 .mx-auto;
        }

        &.emphasize {
            @apply .z-20 .border-b-2 .border-blue-dark;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.5);
        }
    }

    .btn {
        @apply .border .border-white .m-3 .py-4 .px-8 .uppercase .text-white .text-lg .rounded .font-light;
        transition: all 100ms linear;

        &:hover {
            @apply .text-blue .bg-white .no-underline;
        }
    }

    .feature {
        @apply .p-4 .my-4 .inline-block .w-full;

        span {
            @apply .block .rounded-full .bg-white .text-blue .text-center .w-24 .h-24 .mx-auto .py-6;

            i {
                @apply .text-5xl;
            }
        }

        h3 {
            @apply .p-4 .my-2 .border-b-4 .border-blue-dark;
        }
    }

    @screen md {
        .feature {
            @apply .w-1/2;
        }
    }

    @screen lg {
        .feature {
            @apply .w-1/3;
        }
    }

    .screenshots {
        cursor: ew-resize;

        .slick-slide {
            position: relative;
            transform: scale(0.7);
            transition: all .5s ease-in-out;

            img {
                @apply .max-w-xs;
            }

            &.slick-center {
                transform: scale(1);
                z-index: 10;
            }
        }

        @screen md {
            .slick-slide {
                img {
                    @apply .max-w-xl;
                }
            }
        }

        .slick-dots li {
            button:before {
                @apply .text-blue;
            }

            &.slick-active button:before {
                @apply .text-blue .opacity-100;
            }
        }
    }

    .useful-links {
        @apply .p-0 .mt-4;

        li {
            @apply .mx-0 .my-3;
            list-style: none;

            &::before {
                @apply .mr-2 .-mt-1 .text-blue;
                content: '■ ';
            }
        }
    }

    .footer {
        @apply .p-8 .pb-0 .text-grey-dark .text-xs;

        @screen md {
            @apply .mt-8;
        }
    }
}
