Responsive Images with Max Height | Next.js | Page 1

#

import Image from 'next/image'
import styled from 'styled-components'
import { H4 } from '@/Atoms/Typography'

const StyledCaseStudyItem = styled.div`
  display: grid;
  grid-template-columns: 1fr 10fr;
  grid-template-rows: 1fr 50px;
  grid-template-areas:
    'number title'
    'number logo';
  gap: 1rem;
`

interface CaseStudyItemProps {
  logo: any
  title: string
  number: number
}

export default function CaseStudyItem({ logo, title, number }: CaseStudyItemProps) {
  const { width, height } = logo.fields.file.details.image
  const { url } = logo.fields.file
  const { alt } = logo.fields
  const order = `0${number + 1}`

  return (
    <StyledCaseStudyItem>
      <H4 fontWeight={600} gridArea='title'>
        {title}
      </H4>
      <H4 fontWeight={600} gridArea='number'>
        {order}
      </H4>
      <Image src={url} alt={alt} layout='responsive' height={height} width={width} />
    </StyledCaseStudyItem>
  )
}

#

I've tried maybe a million things, and I cannot figure it out.

#

#Responsive Images with Max Height