*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------------------------------------------*/
body {
    background-color: #dfecf5;
}
.grid {
    display: grid;
    grid-template-columns: 1fr; /* default: 1 column */
    background-color: #dfecf5;
    gap: 10px;
    text-align: center;
}
/* @ media is placed under .grid. Both .grid and @ media have the same specificity. So in this case that does not matter. The cascade order does matter here When specificity is equal, the later rule wins if it applies
. */
.wrapper {
    max-inline-size: 1400px; 
    margin-inline: auto; 
}

/* Switch to 4 columns at 600px */
@media (min-width: 600px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* CSS doesn’t allow media queries nested inside selectors (unless you’re using a preprocessor like SCSS). In plain CSS, the media query must sit outside the rule.

No need for 
Grid will automatically size rows based on content.
You only need rows if you want fixed heights. 2nd Use grid-template-columns for responsiveness
You already figured that out — just move the media query outside. 3rd. ✔ repeat(4, 1fr) is cleaner
Same as writing 1fr 1fr 1fr 1fr.
*/
img {
    /*display: block;*/
    max-inline-size: 100%;
}

h2 {
	background-color: aliceblue;
	padding: 4px;
	/*text-align: center;*/
}

p {

	padding: 4px;
	text-align: left;
}
footer {
    background-color: #dbdbdb;
    padding: 16px;
    text-align: center;
    font-size: 1.1rem; /* increase size here */
    margin-top: 40px;
    /*margin-bottom: 50pxpx;*/
}

.footer-link {
  color: #070600;
  text-decoration: none;
}
.footer-link:hover {
  color: #6c8093; /* light blue on hover */
  /*text-decoration: underline;  optional */
}