When I assign a width value to the image’s parent div, that width value is overwritten by some other property and it gets shrunk.
I tried to change the properties of the box, the container, and it didn’t solve anything, it just messed up my code.

`import React from 'react'
import styles from './style.module.css'
import Link from 'next/link'
import Image from 'next/image'

interface Props {
  link: string
  text: string
  image?: string
}

export default function Button({ link, text, image }: Props) {
  return (
    <Link href={link} className={styles.button}>
      {!image ? (
        ''
      ) : (
        <div className="relative box-border block justify-center items-center overflow-hidden drop-shadow-xl h-[45px] w-[45px]">
          <Image src={image} alt={''} fill />
        </div>
      )}
      <span className="flex w-full">{text}</span>
    </Link>
  )
}

css code:

.button {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 2px solid white;
  border-radius: 32px;
  box-sizing: border-box;
  transition: all .3s;
  width: 100%;
  max-width: 524px;
  text-align: center;
  background-color: #222222;
  align-items: center;
  justify-content: center;
}
.button:hover {
  background-color: #262626;
  scale: 101%;
  transition: all .3s;
}