Testing to relocate CSS according to new App dir functionality

components/layout/dynamic-content-manager/dynamic-content-manager.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { Info } from 'lucide-react'
-import dynamic from 'next/dynamic'
+import { Info } from 'lucide-react';
+import dynamic from 'next/dynamic';
+import './dynamic-content.css';
 
-import Hero from 'components/modules/hero'
+import Hero from 'components/modules/hero';
 const Slider = dynamic(() => import('components/modules/slider'))
 const BlurbSection = dynamic(() => import('components/modules/blurb-section'))
 const FilteredProductList = dynamic(

components/layout/dynamic-content-manager/dynamic-content.css

@@ -0,0 +1,23 @@
+.dynamic-content > :not(.hero) {
+  @apply my-16 lg:my-24;
+}
+
+.dynamic-content > :first-child {
+  @apply mt-0 md:mt-0 lg:mt-0;
+}
+
+.dynamic-content > :last-child {
+  @apply mb-16 lg:mb-24;
+}
+
+.dynamic-content .dynamic-content {
+  @apply px-0 md:px-0;
+}
+
+.dynamic-content .dynamic-content > {
+  @apply my-0 md:my-0 lg:my-0;
+}
+
+.dynamic-content .dynamic-content > :last-child {
+  @apply my-0 md:my-0 lg:my-0;
+}

components/modules/carousel/carousel.css

@@ -0,0 +1,37 @@
+/* Glider slider. */
+.glider {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.glider::-webkit-scrollbar {
+  display: none;
+}
+
+.glider-dots {
+  @apply flex !space-x-[2px] !mt-8;
+}
+
+.glider-dot {
+  @apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16;
+}
+
+.glider-dot.active {
+  @apply after:!bg-high-contrast;
+}
+
+.glider-prev {
+  @apply text-high-contrast !right-12 !-top-10 !left-auto lg:!right-16 lg:!-top-12 2xl:!-top-16 2xl:!right-[100px] !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110;
+}
+
+.glider-next {
+  @apply text-high-contrast !right-4 !-top-10 lg:!right-8 lg:!-top-12 2xl:!-top-16 2xl:!right-16 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-110;
+}
+
+.pdp .glider-prev {
+  @apply text-high-contrast absolute !left-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden;
+}
+
+.pdp .glider-next {
+  @apply text-high-contrast absolute !right-4 !top-1/2 !transition-transform !duration-100 hover:!text-high-contrast hover:scale-100 lg:hidden;
+}

components/modules/carousel/carousel.tsx

@@ -1,7 +1,8 @@
-import 'glider-js/glider.min.css'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
-import React from 'react'
-import Glider from 'react-glider'
+import 'glider-js/glider.min.css';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+import React from 'react';
+import Glider from 'react-glider';
+import './carousel.css';
 
 export interface CarouselItemProps {
   children: React.ReactNode

components/product/price.tsx

@@ -1,12 +1,14 @@
 const Price = ({
+  className,
   amount,
   currencyCode,
   ...props
 }: {
   amount: string;
   currencyCode: string | 'SEK' | 'GPB';
+  className?: string;
 } & React.ComponentProps<'p'>) => (
-  <p suppressHydrationWarning={true} {...props}>
+  <p className={className} suppressHydrationWarning={true} {...props}>
     
     {`${new Intl.NumberFormat(undefined, {
       style: 'currency',

components/product/product-view.tsx

@@ -30,7 +30,7 @@ export default function ProductView({product, relatedProducts }: ProductViewProp
                 hasDots={false}
                 gliderClasses={'lg:px-8 2xl:px-16'}
                 slidesToScroll={1}
-                slidesToShow={1.025}
+                slidesToShow={images.length > 1 ? 1.0125 : 1}
                 responsive={{
                   breakpoint: 1024,
                   settings: {

components/ui/product-card/product-card.tsx

@@ -62,11 +62,13 @@ const ProductCard: FC<Props> = ({
             className={cn('text-high-contrast flex items-start flex-col', className)}
           >
             <Text
-              className="mt-2 lg:mt-3 font-bold"
+              className="mt-2 lg:mt-3"
+              variant='listChildHeading'
             >
               {product.title}
             </Text>
-            <Price 
+            <Price
+              className='text-sm font-medium leading-tight lg:text-base' 
               amount={`${product.price.value}`} 
               currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
             />

components/ui/text/text.tsx

@@ -73,7 +73,7 @@ const Text: FunctionComponent<TextProps> = ({
           variant === 'productHeading',
           ['max-w-prose text-2xl font-display font-bold leading-none md:text-3xl md:leading-none lg:leading-none lg:text-4xl']:
           variant === 'sectionHeading',
-          ['text-sm font-semibold leading-tight lg:text-base']:
+          ['text-sm font-medium leading-tight lg:text-base']:
             variant === 'listChildHeading',
           ['text-sm max-w-prose lg:text-base 2xl:text-lg']: variant === 'label',
           ['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph',