feat: responsive shot card

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -116,13 +116,7 @@ export function Options() {
           }}
           align="end"
         >
-          <Text
-            color="gray"
-            size={{
-              initial: '1',
-              sm: '2',
-            }}
-          >
+          <Text color="gray" size={{ initial: '1', sm: '2' }}>
             {(
               resolvePenetrationCoefficient(
                 hasCalibratedShells,

src/app/tools/tankopedia/[id]/components/ShotDisplaySection.tsx

@@ -0,0 +1,16 @@
+import { Flex } from '@radix-ui/themes';
+import { ShotDisplayCard } from '../../../../../components/Armor/components/ShotDisplayCard';
+
+export function ShotDisplaySection() {
+  return (
+    <Flex
+      justify="center"
+      display={{
+        initial: 'flex',
+        sm: 'none',
+      }}
+    >
+      <ShotDisplayCard />
+    </Flex>
+  );
+}

src/app/tools/tankopedia/[id]/page.tsx

@@ -11,6 +11,7 @@ import { HistorySection } from './components/HistorySection';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
 import { TechTreeSection } from './components/Model/TechTreeSection';
+import { ShotDisplaySection } from './components/ShotDisplaySection';
 import { VideoSection } from './components/VideoSection';
 
 export default function Page({ params }: { params: { id: string } }) {
@@ -77,6 +78,7 @@ export default function Page({ params }: { params: { id: string } }) {
       {assigned && (
         <>
           <HeroSection />
+          <ShotDisplaySection />
           {!exempt && <AdMidSectionResponsive />}
           <CharacteristicsSection />
           {!exempt && <AdMidSectionResponsive />}