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

@layer utilities {
    .bg-grid-light {
        @apply bg-2 md:bg-4;
        @apply bg-black-squares;
    }

    .bg-grid-dark {
        @apply bg-2 md:bg-4;
        @apply bg-white-squares;
    }
}

html,
body {
    @apply w-screen overflow-x-hidden;
}

.grid-area-hero {
    grid-template-areas: "right-top" "left" "right";
}

.grid-area-left {
    grid-area: left;
}

.grid-area-right-top {
    grid-area: right-top;
}

.grid-area-right {
    grid-area: right;
}

.scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}

.shadow-horizontal-scroller {
    box-shadow: inset -20px 0 12px -12px var(--tw-shadow-color),
        inset 20px 0 12px -12px var(--tw-shadow-color);
}

.shadow-vertical-scroller {
    box-shadow: inset 0 -20px 12px -12px var(--tw-shadow-color),
        inset 0 20px 12px -12px var(--tw-shadow-color);
}

@media (min-width: 600px) {
    .grid-area-hero {
        grid-template-areas: "left right-top right-top" "left right right" "left right right";
    }
}