src/entities/experience/ui/ExperienceCard/ExperienceCard.tsx

@@ -41,7 +41,8 @@ export function ExperienceCard({ title, company, period, description, stack, cla
             <p className="text-sm font-medium brutal-border-left pl-3">{period}</p>
             <p className="text-lg font-black">{company}</p>
             {stack.length > 0 && (
-              <div className="flex flex-wrap gap-2">
+              /* Golden-ratio cap for the stacked (top) tablet layout; full width on mobile, and lg sidebar is already width-constrained. */
+              <div className="flex flex-wrap gap-2 sm:max-w-golden lg:max-w-none">
                 {stack.map((tech) => (
                   <Badge key={tech} variant="outline" size="xs">
                     {tech}

src/entities/project/ui/ProjectCard/ProjectCard.tsx

@@ -47,7 +47,8 @@ export function ProjectCard({ title, year, description, tags, url, imageUrl, pri
           <div className="flex flex-col gap-4">
             <p className="text-sm font-medium brutal-border-left pl-3">{year}</p>
             {tags.length > 0 && (
-              <div className="flex flex-wrap gap-2">
+              /* Golden-ratio cap for the stacked (top) tablet layout; full width on mobile, and lg sidebar is already width-constrained. */
+              <div className="flex flex-wrap gap-2 sm:max-w-golden lg:max-w-none">
                 {tags.map((tag) => (
                   <Badge key={tag} variant="outline" size="xs">
                     {tag}

src/shared/styles/theme.css

@@ -293,6 +293,13 @@
 .brutal-shadow-lg {
   box-shadow: var(--shadow-brutal-lg);
 }
+/* Golden-ratio (1/φ ≈ 0.618) cap for badge/tag groups so they form a tidy
+ * block instead of spanning the full width. Apply with a breakpoint prefix
+ * (e.g. sm:) — on mobile the group should use the full available width. */
+@utility max-w-golden {
+  max-width: 61.8%;
+}
+
 @utility brutal-border {
   border: var(--border-width) solid var(--blue);
   border-radius: var(--radius);