@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {}

body {
    @apply bg-primary-500;
}

.container {
    @apply max-w-7xl mx-auto grid grid-cols-12 items-center;
}

.header {
    @apply p-2 bg-slate-200;
}

.logo {
    @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2 py-4;
}

.menu {
    @apply col-span-8 flex justify-between;
}

a[href^="/#"]:not([class*="btn"]) {
    @apply underline decoration-dotted underline-offset-4 decoration-neutral-500;
}

.footer {
    @apply px-2 py-4 bg-slate-200;

    .k-logo {
        @apply col-span-2  text-9xl text-orange-400;

        svg {
            @apply my-0 mx-auto;
        }
    }

    &-text {
        @apply col-span-4  prose prose-p:text-sm;

        &-small {
            @apply col-span-8 col-start-3 prose prose-p:text-xs;
        }
    }
}

.block {
    @apply py-10;

    &-img {
        @apply py-0;
    }

    &-content {
        @apply col-span-6 h-full flex flex-col justify-between prose;
    }

    &-text {
        @apply whitespace-break-spaces;
    }

    &-title {
        @apply text-3xl prose-h1:font-black
    }

    &-image {
        @apply col-span-6 bg-slate-400;
        min-height: 50vh;
    }

    &-btn {
        @apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg;
    }
}

.review {
    @apply col-span-4 grid grid-cols-4 items-center px-4;

    &-image {
        @apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
    }

    &-content {
        @apply col-span-3 text-end italic;
    }

    &-title {
        @apply col-span-4 font-bold text-lg text-end mt-4;
    }
}