body {
     font-family: Arial, Verdana, sans-serif;
     background-image: url('wallpaper pet.jpg');
    
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;}

img.medium {
           width: 250px;
           height: 250px;}

h1, h2, h3, h4, h5, h6 {
                       color: rgb(80,122,91);}
h2#pets {
        padding: 10px;
        border: 2px solid rgb(95,122,101);
        border-radius: 5px;}
.store {
        color: rgb(28,81,120);}
       

p {
  display: block;
  font-weight: bold;
  margin: 10px auto 10px auto;
  text-align: left;
  line-height: 1.5;
  color: rgb(85,80,122;}

ul, ol {
  color: rgb(86,74,176)
  font-weight: bold;
  list-style: inside circle;
  width: 780px;
  align-items: left;
  justify-content: space-around;
  margin-right: 20px;}


li {
  font-weight: bold;
  list-style: decimal;
  color: #ff4757;     
  font-size: 1.2em;}

 <!-- html 5 stuff-->

.article { 
        clear: both;
        overflow: auto;
        width: 100%}
li#section {
            float: left;
            width: 659px;
            border-right: 2px solid rgb(189,114,247);}

 <!-- end of html 5 stuff-->

.grid-item ol {
  counter-reset: my-counter;
  list-style-type: none; 
  padding-left: 0;}

.grid-container {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;}

.grid-item ol li {
  counter-increment: my-counter;}


.grid-item ol li::before {
  content: "1." counter(my-counter) " ";
  font-weight: bold;                     
  margin-right: 8px;                     
  color: #333;}    

.container {
  display: grid;
  grid-template-columns: 1fr; /* 1 column on mobile */
  grid-auto-rows: minmax(50px, auto);
  gap: 20px;}

.container > div {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(202,193,232);
  border: 2px solid rgb(52,235,232);}

.grid-container {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;}


a:link {
  text-decoration: underline blue wavy 2px;}
a:visited {
  color: rgb(114,85,135);}
a:hover {
  color: rgb(135,85,133);}
a:active {
  color: rgb(135,85,112);}

div { 
  margin: 10px auto 10px auto;
  text-align: left;
  line-height: 1.5;
  color: rgb(28,81,120);
  border-top: 1px solid rgb(80,122,91);
  border-bottom: 1px solid rgb(80,122,91);}

.header,
.footer {
  font-weight
  font-size: 16px;
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(245,205,179);
  color: rgb(49,110,108);
  text-align: right;}
      


@media (max-width: 650px) {
  .grid-container {
    grid-template-columns: 1fr; 
  }
  h1, footer {
    grid-column: span 1; 
}