<ProjectContainer key={id} sizes={size}> <ProjectInner>

<ProjectImgContainer>
<ProjectImg
loader={imageLoader}
sizes={size}
src={img}
alt={alt}
width={100}
height={100}
placeholder="blur"
blurDataURL={img}
/>
</ProjectImgContainer>
<ProjectTextSection>
<ProjectTitle
href={${Routes.PROJECT_PAGE}/${path}}
color="text"
mt={2}
>
<Heading variant="h3" fontSize={4}>
{title}
</Heading>
</ProjectTitle>
<ProjectSubtitle color="text" variant="defaultText">
{subtitle}
</ProjectSubtitle>
</ProjectTextSection>
</ProjectInner>
</ProjectContainer>

——————————————————
export const ProjectImg = styled(Image)<Sizes>`
width: 100%;
height: auto;
object-fit: contain;

@media (min-width: ${breakpointsPx.md}) {
width: 100%;
height: ${({ sizes }) =>
sizes === BlogSizes.big ? BlogSizesHeight.big : BlogSizesHeight.small};
object-fit: ${({ sizes }) =>
sizes === BlogSizes.big ? BlogSizesFit.big : BlogSizesFit.small};
}
`

export const ProjectsContainer = styled(Box)`
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap: ${spaces.md}px;
break-inside: avoid;
width: 100%;

@media (min-width: ${breakpointsPx.md}) {
grid-template-columns: repeat(2, 1fr);
}
`
export const ProjectContainer = styled.div<Sizes>`
width: 100%;
margin: 0 auto;
height: auto;

@media (min-width: ${breakpointsPx.md}) {
width: 100%;
margin: 0;
display: grid;
grid-row: ${({ sizes }) =>
sizes === BlogSizes.big ? BlogSizesGrows.big : BlogSizesGrows.small};
overflow: hidden;
}
`

export const ProjectInner = styled.div`
display: inline-block;
height: 100%;
width: 100%;
`

По вашему так кидать код - заебись?