style.css

 img {
  height: 3rem;
  width:auto;
}
#weather-data img{
  height: 4rem;
    width: auto;
}

#cards-container img {
  height: 6rem;
  width: auto;
}
#cards-container {
  column-gap: 1rem;
  row-gap: 2rem;
  overflow: hidden;
  width: 80vw;
  padding: 1em;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto;
}
#region{
  width: 100%;
  text-align: center;
}
#region p{
  width: 100%;
  text-align: center;
  }

div label{
  padding: 1rem;
  gap: 1em;

}

#grid-details {
display: grid;
grid-template-rows:20% 70% 10%;
grid-template-columns: 25% 50% 25%;
grid-template-areas: "header header header"
"main main main"
"footer footer footer";
position: absolute;
padding: 5px;
width: 100%;
height: 100%;

}
#flag-div{
  grid-row: 1;
  display: grid;
    place-items: center;
  grid-column: 1;
}
#escudo-div{
  justify-self: center;
  grid-row: 1;
  grid-column: 3;
  display: grid;
  place-items: center;
}
#escudo-div img{
  width: 11.5rem;
    height: 11.5rem;
}
#flag-div img{
  width: 18rem;
    height: 11.5rem;
}
#header-div {
  grid-area: header;

  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: 25% 50% 25%;
  gap: 2%;

}
#countryname-div {
display: grid;
place-items: center;
}
#main-div {
  grid-area: main;
}
#footer-div {
  grid-area: footer;
}

@media screen and (max-width: 1000px) {
    #cards-container {
        display: grid;
        /*MEDIA QUERY FOR PRODUCT PAGE; BETWEEN 700px AND 1300px*/
        grid-template-columns:auto auto auto;
       gap: 10px 10px;
        margin: 2%;
      }
  }

@media screen and (max-width: 575.98px) {
#cards-container {
        display: grid;
        grid-template-columns: auto auto;
        /*MEDIA QUERY FOR PRODUCT PAGE; UNDER 700px */
        gap: 10px 10px;
        margin: 2%;
        display: block;
      }
 }