CSS - Média Query

Media Query

<!-- index.html -->
<!-- Head starts -->
<style>
  /* Declare global variables in root */
  :root {
    --box-background-color: brown;
  }

  .box-background {
    /* use --box-background-color variable if exists, else apply gay */
    background-color: var(--box-background-color, gray);
  }

  .square {
    width: 200px;
    height: 200px;
  }

  @media (max-width: 600px) {
    .square {
      width: 50px;
      height: 50px;
    }
  }
</style>
<!-- Style block end -->
<!-- Head ends -->
<!-- Body starts -->
<div class="box-background square"></div>
<!-- Body ends -->

Area Template

<!-- index.html -->
<!-- header starts -->
<style>
  .d1 {
    background-color: lightskyblue;
    grid-area: header;
  }

  .d2 {
    background-color: lightsalmon;
    grid-area: advert;
  }

  .d3 {
    background-color: paleturquoise;
    grid-area: content;
  }

  .d4 {
    background-color: lightpink;
    grid-area: footer;
  }


  .p5 {
    padding: 5px;
  }

  /* Default */
  .container {
    min-height: 300px;
    width: 100%;
    background-color: lightgrey;
    font-size: 1.5em;
    font-family: monospace;
    padding: 5px;
    display: grid;
    /* Three columns */
    grid-template-columns: 1fr;
    /* Gap between columns */
    /* column-gap: 5px; */
    /* Two lines */
    grid-template-rows: 50px auto 1fr auto;
    /* Gap between rows */
    /* row-gap: 5px; */
    /* Gap between rows and columns */
    gap: 5px 5px;
    /* Template areas */
    grid-template-areas:
      "header"
      "advert"
      "content"
      "footer";
  }

  @media (min-width: 300px) {
    .container {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "advert header"
        "advert content"
        "advert footer";
    }
  }

  @media (min-width: 600px) {
    .container {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "advert content"
        "advert footer";
    }
  }
</style>
<!-- Style block end -->
<!-- header ends -->
<!-- Body starts -->
<div class="container">
  <div class="p5 d1">Header</div>
  <div class="p5 d2">Advert</div>
  <div class="p5 d3">Content</div>
  <div class="p5 d4">footer</div>
</div>
<!-- Body ends -->