<style>

 

body {

display: grid;
font-family: Arial;
gap: 0.5em;

  max-width: 60em;

  margin: 1em auto;

}

 

@media (min-width: 30em) {

              /* Breite beträgt mindestens 30em */

              body {

                            background-image: linear-gradient(to right, grey, #000000);

                            grid-template-columns: 1fr 3fr;

                            grid-template-rows: auto 1fr 100px;

                            color: orange;

                            font-family: arial;

              }

}

 

@media (max-width: 30em) {

              /* Breite beträgt max 30em */

              body {

                            background-image: linear-gradient(to right,grey, #000000);

                            grid-template-columns: 1fr 3fr;

                            grid-template-rows: auto 1fr 100px;

                            color: orange;

                            font-family: arial;

              }

}

 

h1 {

  color: #00a2b5;

  background-color: beige;

  font-size: 1.5em;

}

 

p {

  color: brown;

}

 

ul {

  font-size: 1.3em;

}

 

#one {

              background-image: linear-gradient(black, white);

}

#two {

              background-image: linear-gradient(42deg, transparent, blue);

}




img {

  width: 100%;

}            


 

@media all and (min-width: 35em) {

  img {

    width: 59%;

  }            

}

 

@media all and (min-width: 50em) {

  img {

    width: 42.5%;

  }            

}


</style>

 