added card component to project.

src/components/Card.astro

@@ -0,0 +1,89 @@
+---
+interface Props {
+  url?: string
+  img?: string
+  title?: string
+  footer: string
+  children?: string | HTMLElement | HTMLElement[]
+}
+
+const { url = '#', img = 'https://fakeimg.pl/640x360', title = 'Default title', footer = 'Your name' } = Astro.props
+---
+
+<div class="card">
+  <div class="card__image">
+    <img src={img} alt="" />
+  </div>
+  <div class="card__content">
+    <h3>
+      <a href={url}>{title}</a>
+    </h3>
+    <p>
+
+    </p>
+    <small>
+      {footer}
+    </small>
+  </div>
+</div>
+
+<style is:global>
+  .card {
+    display: flex;
+    flex-direction: column;
+    max-width: 60ch;
+    min-height: 100%;
+    position: relative;
+    overflow: hidden;
+    transition: box-shadow 0.15s ease-in-out;
+    border: none !important; 
+  }
+
+  .card:hover,
+  .card:focus-within {
+    box-shadow: 0 0 0 0.25rem;
+  }
+
+  .card:focus-within a:focus {
+    text-decoration: none !important;
+    box-shadow: none;
+    outline: none;
+  }
+
+  .card__image {
+    height: 10rem;
+  }
+
+  .card__image img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+
+  .card__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 1rem;
+  }
+
+  .card__content a {
+    text-decoration: none;
+  }
+
+  .card__content a:focus {
+    text-decoration: none;
+  }
+
+  .card__content a::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    text-decoration: none;
+  }
+
+  .card__content:last-child {
+    margin-top: auto;
+    padding-top: 2rem;
+  }
+</style>

src/components/Events.astro

@@ -1,5 +1,6 @@
 ---
-import { Card } from 'accessible-astro-components'
+
+import Card from '../components/Card.astro'
 import { Icon } from 'astro-icon/components'
 
 const response = await fetch('https://graphql.datocms.com/', {

src/pages/event/[...page].astro

@@ -1,6 +1,7 @@
 ---
 import DefaultLayout from '../../layouts/DefaultLayout.astro'
-import { Card, Pagination } from 'accessible-astro-components'
+import { Pagination } from 'accessible-astro-components'
+import Card from '../../components/Card.astro'
 
 export async function getStaticPaths({ paginate }) {
   const response = await fetch('https://graphql.datocms.com/', {

src/pages/index.astro

@@ -50,18 +50,21 @@ const { page } = Astro.props
   <Events />
   <section class="">
     <div class="container">
-      <section class="mt-2">
-        <div class="container-bg w-full px-10 py-12">
-          <div class="container-content border bg-gray-100 bg-white bg-opacity-90 px-16 py-8">
-            <h2 class="text-center">{pitch1Title}</h2>
-            <p class="text-center">
-              {pitch1Body}
-            </p>
-            <div class="btn mt-4 flex justify-center py-2">
-              <BtnSecondary text="Läs mer" link="om-vastljus" />
-            </div>
+      <div class="container w-full py-12">
+        <div class="container-content border bg-gray-100 bg-white bg-opacity-90 px-16 py-8">
+          <h2 class="text-center">{pitch1Title}</h2>
+          <p class="text-center">
+            {pitch1Body}
+          </p>
+          <div class="btn mt-4 flex justify-center py-2">
+            <BtnSecondary text="Läs mer" link="om-vastljus" />
           </div>
         </div>
+        </div>
+      <section class="mt-2">
+        <div class="w-full px-10 py-6">
+
+        </div>
       </section>
     </div>
     <section>
@@ -140,6 +143,7 @@ const { page } = Astro.props
     box-shadow: 1px 8px 24px 0px rgba(0, 0, 0, 0.75);
     -webkit-box-shadow: 1px 8px 24px 0px rgba(0, 0, 0, 0.75);
     -moz-box-shadow: 1px 8px 24px 0px rgba(0, 0, 0, 0.75);
+    background-size: 100vw;
   }
 
   .card {
@@ -150,7 +154,7 @@ const { page } = Astro.props
     /* Dina mobilspecifika CSS-regler här */
     .container-bg {
       padding: 1rem;
-      background-size: cover;
+      background-size: 100vw;
 
       .container-content {
         padding-left: 1rem;