diff --git a/web/src/components/sponsor/SponsorList.tsx b/web/src/components/sponsor/SponsorList.tsx
index ba567f2..2143eed 100644
--- a/web/src/components/sponsor/SponsorList.tsx
+++ b/web/src/components/sponsor/SponsorList.tsx
@@ -7,9 +7,8 @@ const SponsorItem = ({ sponsor }: { sponsor: SponsorBlock }) => {
const { name, logo, website, text } = sponsor;
return (
- {name}
- {logo && (
-
+
+ {logo && (
{
height={logo.height}
sizes="20vw"
/>
-
- )}
- {text && (
-
- )}
- {website && (
-
-
- Besøk nettside
-
-
- )}
+ )}
+
+
);
};
diff --git a/web/src/components/sponsor/sponsorList.module.scss b/web/src/components/sponsor/sponsorList.module.scss
index e69de29..72c304d 100644
--- a/web/src/components/sponsor/sponsorList.module.scss
+++ b/web/src/components/sponsor/sponsorList.module.scss
@@ -0,0 +1,57 @@
+.sponsorList {
+ margin-bottom: var(--spacing-section-bottom);
+ ul {
+ list-style: none;
+ }
+}
+
+.sponsorItem {
+ //background: var(--color-background-secondary);
+ border-top: var(--border);
+ padding: var(--spacing-m) 0;
+ display: grid;
+ grid-template-columns: 1fr var(--size-width-p) 1fr;
+ align-items: center;
+ column-gap: var(--spacing-gap-column);
+ margin-bottom: var(--spacing-gap-row);
+ min-height: 10rem;
+ &:last-child {
+ border-bottom: var(--border);
+ }
+ h2 {
+ font-size: var(--font-size-h3);
+ margin-bottom: 1rem;
+ }
+ p {
+ font-size: var(--font-size-caption);
+ }
+ .website {
+ display: inline-block;
+ font-weight: 600;
+ margin-top: 1rem;
+ }
+}
+
+.image {
+ width: 10rem;
+ height: 10rem;
+ display: flex;
+ align-items: center;
+}
+
+@media (max-width: 1260px) {
+ .sponsorItem {
+ grid-template-columns: 10rem 1fr;
+ }
+}
+
+@media (max-width: 600px) {
+ .sponsorItem {
+ grid-template-columns: 5rem 1fr;
+ align-items: flex-start;
+ }
+ .image {
+ width: 5rem;
+ height: 5rem;
+ }
+}
\ No newline at end of file