style: modal fixes in bigger screen sizes

increase height of youtube embed

packages/web/components/Seeds/Card.tsx

@@ -12,6 +12,7 @@ import {
   Text,
   useDisclosure,
 } from '@metafam/ds';
+import BackgroundImage from 'assets/main-background.jpg';
 import ModalCardBg from 'assets/modal-bg.png';
 import SeedCardBg from 'assets/seed-card-bg.png';
 
@@ -67,14 +68,16 @@ export const Card: React.FC<CardProps> = ({ title, description, Content }) => {
         <ModalOverlay />
         <ModalContent
           borderRadius="xl"
-          bgImg={ModalCardBg}
+          bgImage={[ModalCardBg, ModalCardBg, BackgroundImage]}
           bgPos="center"
           bgColor="purpleModalDark"
           bgRepeat="no-repeat"
           textColor="white"
           maxH={['full', 'full', '90%']}
-          h={['full', 'full', '90%']}
-          marginTop={[0, 0, 'auto']}
+          h={['full', 'full', 'auto']}
+          // w="auto"
+          maxW="3xl"
+          alignItems="center"
         >
           <ModalHeader fontSize={24} fontWeight="bold">
             {title.toUpperCase()}

packages/web/components/Seeds/modals.tsx

@@ -452,6 +452,7 @@ export const BecomeAPatron = () => (
     <Box my={2}>
       <iframe
         width="100%"
+        height="300px"
         src="https://www.youtube.com/embed/CYuwpR8CLXY?feature=oembed"
       ></iframe>
     </Box>