feat: add container and screen sizes (#4486)

* feat: add container and screen sizes

* auto update snapshots (#4488)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Maximilian Franzke <[email protected]>

Author: 3 people

__snapshots__/section/showcase/chromium-highContrast/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png

@@ -16,6 +16,13 @@ Please provide the correct `type` property in your code anyhow as a best practis
 We removed the `state` property from the `db-button`/`DBButton` component for now.
 It wasn't implemented in any framework causing some confusion, and we will reintroduce it in a future version.
 
+## breakpoints
+
+We updated some breakpoints to align with design:
+
+- `$db-screen-size-xs: 360` ➡️ `$db-screen-size-xs: 320`
+- `$db-screen-size-sm: 720` ➡️ `$db-screen-size-sm: 768`
+
 ## icon-before/-after
 
 We renamed the `data-icon-after` and `data-icon-before` properties to `data-icon-trailing` and `data-icon-leading`,

__snapshots__/section/showcase/chromium/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png

@@ -225,8 +225,6 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 	}
 }
 
-$max-mobile-size: calc(100vw - 2 * #{variables.$db-spacing-fixed-md});
-
 %default-popover {
 	@extend %default-card;
 	@extend %popover-placement;
@@ -238,13 +236,12 @@ $max-mobile-size: calc(100vw - 2 * #{variables.$db-spacing-fixed-md});
 	z-index: 1337;
 	// revert this if popover is included in button
 	white-space: normal;
-	max-inline-size: $max-mobile-size;
+	max-inline-size: variables.$db-container-xs;
 	block-size: fit-content;
 	inline-size: fit-content;
 
 	&[data-width="fixed"] {
 		inline-size: max-content;
-		max-inline-size: min(#{variables.$db-sizing-3xl}, #{$max-mobile-size});
 		text-align: initial;
 	}
 }

__snapshots__/section/showcase/firefox/DBSection-should-match-screenshot-1/DBSection-should-match-screenshot.png

@@ -1,8 +1,8 @@
 @use "helpers";
 @use "sass:map";
 
-$db-screen-size-xs: 360; // mobile
-$db-screen-size-sm: 720; // tablet
+$db-screen-size-xs: 320; // mobile
+$db-screen-size-sm: 768; // tablet
 $db-screen-size-md: 1024; // small desktop
 $db-screen-size-lg: 1440; // regular desktop
 $db-screen-size-xl: 1920; // large desktop
@@ -14,25 +14,25 @@ $db-breakpoint-lg: helpers.px-to-em($db-screen-size-lg);
 $db-breakpoint-xl: helpers.px-to-em($db-screen-size-xl);
 
 @mixin get-breakpoint-properties() {
-	@property --db-breakpoint-xs {
+	@property --db-screen-xs {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-xs};
 	}
 
-	@property --db-breakpoint-sm {
+	@property --db-screen-sm {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-sm};
 	}
 
-	@property --db-breakpoint-md {
+	@property --db-screen-md {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-md};
 	}
 
-	@property --db-breakpoint-xl {
+	@property --db-screen-xl {
 		syntax: "*";
 		inherits: true;
 		initial-value: #{$db-breakpoint-xl};