/**Add place to check out current bounties */ const Section = styled.div` display: flex; width: 100%; padding: 3.125rem; flex-direction: column; align-items: flex-start; gap: 3rem; & > div:first-child { display: flex; justify-content: space-between; align-items: flex-start; align-self: stretch; & > h2 { display: flex; flex-direction: column; color: var(--black, #000); font-size: 2rem; font-weight: 500; } @media screen and (max-width: 768px) { flex-direction: column; align-items: center; gap: 1.5rem; } } `; const Logos = styled.div` display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; gap: 3rem; @media screen and (max-width: 768px) { grid-template-columns: repeat(3, 1fr); } @media screen and (max-width: 480px) { grid-template-columns: repeat(1, 1fr); } & > a > img { width: 100%; object-fit: contain; } `; const sponsors = [ { url: "https://marmaj.org/", name: "MarmaJ", image: "https://pbs.twimg.com/profile_images/1621907418467663877/JcB4OAXp_400x400.jpg", }, ]; return ( <> <Section> <div> <h2>Sponsors</h2> </div> <Logos> {sponsors.map((sponsor) => ( <a href={sponsor.url} target="blank"> <img src={sponsor.image} /> </a> ))} </Logos> </Section> </> );