tailwind.css

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

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css');

@layer base {
    html, body {
        font-family: 'Open Sans', sans-serif;
        @apply antialiased bg-purple-200 bg-opacity-10
    }
}

@layer components {
    @media(max-width: 640px) {
        .container {
            max-width: 100%;
            @apply px-4 box-border
        }
    }
}

.slick-prev {
    @apply absolute top-1/2 -left-8 -translate-y-1/2 hidden md:block
}
.slick-next {
    @apply absolute top-1/2 -right-8 -translate-y-1/2 hidden md:block
}

#rfs-btn {
    @apply h-14 w-[109px] border-2 border-gray-200 rounded transition-colors hover:border-purple-600
}
#rfs-btn[aria-expanded="true"] {
    @apply border-purple-600
}
#rfs-btn >span >span:nth-child(1) {
    @apply text-base
}
#rfs-btn >span >span:nth-child(2) {
    @apply text-sm
}
#rfs-btn + ul {
    @apply border-none shadow-lg
}
[data-testid="rfs"] {
    @apply !pb-0
}