:root {
--text-color:#fff;
}
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
margin: 10px;
background: #ddd;
font-family: 'Noto Serif', serif;
}
.container {
margin: 0 auto;
width: 100%;
height: 100%;
background: goldenrod;
display: grid;
grid-template-columns: 3fr 1fr;
grid-gap: 10px;
}
.rightcontainer {
background: blue;
padding: 25px;
}
... (remaining CSS code)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
... (remaining HTML code)
img tags inside leftcontainer__feature-article1 and leftcontainer__feature-article2 on chrome occupy full width and height of the parent, but in Firefox I am facing issues.
I attempted to add max-width and max-height to both the parent container and the image tag, which resolved the issue in Firefox but caused it to fail in Chrome.
I have been trying to fix this problem for quite some time now, but I can't seem to figure out what's wrong. I would appreciate any insights into where I might be making a mistake.