refactor: import using style src over @import

apps/website/src/components/atoms/BoxCTA/BoxCTA.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./BoxCTA.scss"></style>
-    @import "./BoxCTA";
-</style>
 
 <script lang="ts">
     import Icon from '$components/atoms/Icon.svelte'

apps/website/src/components/atoms/Button/Button.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Button.scss"></style>
-    @import "./Button";
-</style>
 
 <script lang="ts">
     import { cx } from 'classix'

apps/website/src/components/atoms/ButtonCart/ButtonCart.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./ButtonCart.scss"></style>
-    @import "./ButtonCart";
-</style>
 
 <script lang="ts">
     import { scale } from 'svelte/transition'

apps/website/src/components/atoms/ButtonCircle/ButtonCircle.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./ButtonCircle.scss"></style>
-    @import "./ButtonCircle";
-</style>
 
 <script lang="ts">
     import { cx } from 'classix'

apps/website/src/components/atoms/SiteTitle/SiteTitle.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./SiteTitle.scss"></style>
-    @import "./SiteTitle";
-</style>
 
 <script lang="ts">
     import SplitText from '$components/SplitText.svelte'

apps/website/src/components/layouts/PosterLayout/PosterLayout.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./PosterLayout.scss"></style>
-    @import "./PosterLayout";
-</style>
 
 <script lang="ts">
     import { addToCart } from '$utils/functions/shop'

apps/website/src/components/molecules/CartItem/CartItem.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./CartItem.scss"></style>
-    @import "./CartItem";
-</style>
 
 <script lang="ts">
     import ButtonCircle from '$components/atoms/ButtonCircle/ButtonCircle.svelte'

apps/website/src/components/molecules/EmailForm/EmailForm.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./EmailForm.scss"></style>
-    @import "./EmailForm";
-</style>
 
 <script lang="ts">
     import { fly } from 'svelte/transition'

apps/website/src/components/molecules/Heading/Heading.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Heading.scss"></style>
-    @import "./Heading";
-</style>
 
 <script lang="ts">
     import SiteTitle from '$components/atoms/SiteTitle/SiteTitle.svelte'

apps/website/src/components/molecules/House/House.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./House.scss"></style>
-    @import "./House";
-</style>
 
 <script lang="ts">
     import dayjs from 'dayjs'

apps/website/src/components/molecules/Location/Location.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Location.scss"></style>
-    @import "./Location";
-</style>
 
 <script lang="ts">
     import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'

apps/website/src/components/molecules/NewsletterIssue/NewsletterIssue.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./NewsletterIssue.scss"></style>
-    @import "./NewsletterIssue";
-</style>
 
 <script lang="ts">
     import dayjs from 'dayjs'

apps/website/src/components/molecules/NotificationCart/NotificationCart.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./NotificationCart.scss"></style>
-    @import "./NotificationCart";
-</style>
 
 <script lang="ts">
     import { fly } from 'svelte/transition'

apps/website/src/components/molecules/Pagination/Pagination.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Pagination.scss"></style>
-    @import "./Pagination";
-</style>
 
 <script lang="ts">
     let {

apps/website/src/components/molecules/PhotoCard/PhotoCard.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./PhotoCard.scss"></style>
-    @import "./PhotoCard";
-</style>
 
 <script lang="ts">
     import Image from '$components/atoms/Image.svelte'

apps/website/src/components/molecules/PostCard/PostCard.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./PostCard.scss"></style>
-    @import "./PostCard";
-</style>
 
 <script lang="ts">
     import { cx } from 'classix'

apps/website/src/components/molecules/Poster/Poster.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Poster.scss"></style>
-    @import "./Poster";
-</style>
 
 <script lang="ts">
     import { addToCart } from '$utils/functions/shop'

apps/website/src/components/molecules/ProcessStep/ProcessStep.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./ProcessStep.scss"></style>
-    @import "./ProcessStep";
-</style>
 
 <script lang="ts">
     import { scale } from 'svelte/transition'

apps/website/src/components/molecules/ShopLocationSwitcher/ShopLocationSwitcher.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./ShopLocationSwitcher.scss"></style>
-    @import "./ShopLocationSwitcher";
-</style>
 
 <script lang="ts">
     import { goto } from '$app/navigation'

apps/website/src/components/molecules/Switcher/Switcher.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Switcher.scss"></style>
-    @import "./Switcher";
-</style>
 
 <script lang="ts">
     import { page } from '$app/stores'

apps/website/src/components/molecules/Toast/Toast.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Toast.scss"></style>
-    @import "./Toast";
-</style>
 
 <script lang="ts">
     import { fade, fly } from 'svelte/transition'

apps/website/src/components/organisms/Banner/Banner.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Banner.scss"></style>
-    @import "./Banner";
-</style>
 
 <script lang="ts">
     // Components

apps/website/src/components/organisms/Carousel/Carousel.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Carousel.scss"></style>
-    @import "./Carousel";
-</style>
 
 <script lang="ts">
     import { writable } from 'svelte/store'

apps/website/src/components/organisms/Cart/Cart.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Cart.scss"></style>
-    @import "./Cart";
-</style>
 
 <script lang="ts">
     import { fade, fly } from 'svelte/transition'

apps/website/src/components/organisms/Collage/Collage.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Collage.scss"></style>
-    @import "./Collage";
-</style>
 
 <script lang="ts">
     import PhotoCard from '$components/molecules/PhotoCard/PhotoCard.svelte'

apps/website/src/components/organisms/Footer/Footer.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Footer.scss"></style>
-    @import "./Footer";
-</style>
 
 <script lang="ts">
     import { getContext } from 'svelte'

apps/website/src/components/organisms/InteractiveGlobe/InteractiveGlobe.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./InteractiveGlobe.scss"></style>
-    @import "./InteractiveGlobe";
-</style>
 
 <script lang="ts">
     import { dev } from '$app/environment'

apps/website/src/components/organisms/Locations/Locations.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./Locations.scss"></style>
-    @import "./Locations";
-</style>
 
 <script lang="ts">
     import { getContext } from 'svelte'

apps/website/src/components/organisms/NewsletterModule/NewsletterModule.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./NewsletterModule.scss"></style>
-    @import "./NewsletterModule";
-</style>
 
 <script lang="ts">
     import { getContext } from 'svelte'

apps/website/src/components/organisms/PostersGrid/PostersGrid.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./PostersGrid.scss"></style>
-    @import "./PostersGrid";
-</style>
 
 <script lang="ts">
     import { getContext } from 'svelte'

apps/website/src/components/organisms/ShopBanner/ShopBanner.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./ShopBanner.scss"></style>
-    @import "./ShopBanner";
-</style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'

apps/website/src/components/organisms/ShopModule/ShopModule.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="./ShopModule.scss"></style>
-    @import "./ShopModule";
-</style>
 
 <script lang="ts">
     import { getContext } from 'svelte'

apps/website/src/routes/(shop)/shop/+layout.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../style/pages/shop.scss"></style>
-    @import "../../../style/pages/shop";
-</style>
 
 <script lang="ts">
     import { setContext } from 'svelte'

apps/website/src/routes/(site)/[country]/[location]/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../../style/pages/location.scss"></style>
-    @import "../../../../style/pages/location";
-</style>
 
 <script lang="ts">
     import { PUBLIC_LIST_INCREMENT } from '$env/static/public'

apps/website/src/routes/(site)/[country]/[location]/[photo]/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../../../style/pages/viewer.scss"></style>
-    @import "../../../../../style/pages/viewer";
-</style>
 
 <script lang="ts">
     import { page, navigating } from '$app/stores'

apps/website/src/routes/(site)/about/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../style/pages/about.scss"></style>
-    @import "../../../style/pages/about";
-</style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'

apps/website/src/routes/(site)/credits/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../style/pages/credits.scss"></style>
-    @import "../../../style/pages/credits";
-</style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'

apps/website/src/routes/(site)/locations/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../style/pages/explore.scss"></style>
-    @import "../../../style/pages/explore";
-</style>
 
 <script lang="ts">
     import { getContext } from 'svelte'

apps/website/src/routes/(site)/photos/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../style/pages/photos.scss"></style>
-    @import "../../../style/pages/photos";
-</style>
 
 <script lang="ts">
     import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_INCREMENT } from '$env/static/public'

apps/website/src/routes/(site)/subscribe/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../style/pages/subscribe.scss"></style>
-    @import "../../../style/pages/subscribe";
-</style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'

apps/website/src/routes/(site)/terms/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../../../style/pages/terms.scss"></style>
-    @import "../../../style/pages/terms";
-</style>
 
 <script lang="ts">
     import dayjs from 'dayjs'

apps/website/src/routes/+error.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../style/pages/error.scss"></style>
-    @import "../style/pages/error";
-</style>
 
 <script lang="ts">
     import { getContext } from 'svelte'

apps/website/src/routes/+page.svelte

@@ -1,6 +1,4 @@
-<style lang="scss">
+<style lang="scss" src="../style/pages/homepage.scss"></style>
-    @import "../style/pages/homepage";
-</style>
 
 <script lang="ts">
     import { navigating } from '$app/stores'