diff --git a/src/components/Sponsor/Section/Sponsors.styles.ts b/src/components/Sponsor/Section/Sponsors.styles.ts
index a77fa10..5da670c 100644
--- a/src/components/Sponsor/Section/Sponsors.styles.ts
+++ b/src/components/Sponsor/Section/Sponsors.styles.ts
@@ -16,17 +16,7 @@ export const SponsorsContainer = styled.div`
max-width: 1440px;
@media screen and (max-width: 800px) {
- position: relative;
- justify-content: flex-start;
- align-items: center;
- max-width: calc(100vw);
- padding: 0 1rem 0.5rem 1rem;
- box-sizing: border-box;
- height: fit-content;
- flex-wrap: nowrap;
- overflow: scroll;
- -ms-overflow-style: none; /* IE and Edge */
- overflow-y: hidden;
+ width: fit-content;
}
`;
diff --git a/src/components/Sponsor/Section/Sponsors.tsx b/src/components/Sponsor/Section/Sponsors.tsx
index 84b5c0e..1fba50e 100644
--- a/src/components/Sponsor/Section/Sponsors.tsx
+++ b/src/components/Sponsor/Section/Sponsors.tsx
@@ -29,18 +29,20 @@ const SponsorsSection = ({
return (
);
};
diff --git a/src/components/Sponsor/Sponsor.styles.ts b/src/components/Sponsor/Sponsor.styles.ts
index 62bae22..0fd22ba 100644
--- a/src/components/Sponsor/Sponsor.styles.ts
+++ b/src/components/Sponsor/Sponsor.styles.ts
@@ -10,6 +10,8 @@ export const Wrapper = styled.a`
text-decoration: none;
gap: 1rem;
transition: 0.3s;
+ padding: 0.2rem;
+ box-shadow: 0 0 3px #cdcdcd;
&:hover {
transform: scale(0.95);
@@ -21,6 +23,14 @@ export const LogoImage = styled(Image)`
border-radius: 4px;
height: 100%;
max-height: 8rem;
- aspect-ratio: 1 / 1;
- box-shadow: 0 0 3px #cdcdcd;
+ min-width: 4rem;
+ max-width: 100%;
+ width: fit-content;
+ object-fit: cover;
+
+ @media screen and (max-width: 800px) {
+ width: fit-content;
+ max-height: 6rem;
+ min-width: 3rem;
+ }
`;
diff --git a/src/components/Sponsor/Sponsor.tsx b/src/components/Sponsor/Sponsor.tsx
index ca74c48..01e6238 100644
--- a/src/components/Sponsor/Sponsor.tsx
+++ b/src/components/Sponsor/Sponsor.tsx
@@ -4,14 +4,22 @@ import { Wrapper, LogoImage } from "./Sponsor.styles";
const Sponsor = ({ data }: { data: ISponsor }) => {
const { name, logo, link } = data;
+ console.log(logo);
+
return (
);
diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts
index e63df9d..643702f 100644
--- a/src/utils/interfaces.ts
+++ b/src/utils/interfaces.ts
@@ -1,6 +1,15 @@
export interface ISponsor {
name: string;
- logo: { fields: { file: { url: string } } } | string;
+ logo:
+ | {
+ fields: {
+ file: {
+ url: string;
+ details: { image: { width: number; height: number } };
+ };
+ };
+ }
+ | string;
link: string;
tier: string;
}
@@ -8,7 +17,16 @@ export interface ISponsor {
export interface ITeamMember {
name: string;
role: string;
- avatar: { fields: { file: { url: string } } } | string;
+ avatar:
+ | {
+ fields: {
+ file: {
+ url: string;
+ details: { image: { width: number; height: number } };
+ };
+ };
+ }
+ | string;
github?: string;
linkedin?: string;
lattes?: string;