/* .section-title,
.section-menu,
.page-header,
.section-about,
.section-hero,
.page-footer {
    background-color: #fee;
    max-width: 1140px;
    margin: 0 auto 20px;
  }
  
.container {
    padding: 10px 15px;
    outline: 1px solid black;
  }

code {
    font-size: 16px;
    font-weight: 500;
    color: rgb(17, 83, 37);
  } */



/* The color indigo is at 900px or wider. */
/* @media (max-width: 1140px) {
    .body-media {
        background-color: #4caf50;
    }
    .section-media {
        max-width: 840px;
    }
    .container.container-media {
        outline: 2px solid red;
    }
  } */

/* The color green is at 600px or wider. */
@media (max-width: 840px) {
    .body-media {
        background-color: #3f51b5;
    }
    .section-media {
        max-width: 640px;
    }
    .container.container-media {
        outline: 2px solid yellow;
    }
    .container-media > h1 {
      font-size: 24px;
      margin-top: 50px;
    }
  }
  
@media (max-width: 600px) {
    pre {
      font-size: 12px;
    }

  }


/* 1x screens, default value, 320x240 image */
.box-retina {
  margin: 0 auto;
  width: 320px;
  height: 240px;
  background-image: url("https://picsum.photos/id/237/320/240");
  background-size: 320px 240px;
}

/* 2x screens, retina, 640x480 image */
@media (min-resolution: 192dpi) {
  .box-retina {
    background-image: url("https://picsum.photos/id/237/640/480");
  }
}

/* === Респонсивний елемент <img> === */

/* .thumb-respons-img {
  width: 320px;
  height: 240px;
  margin: 0 auto;
} */

/* Кадрування (art direction) */



.container-art {
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.thumb-art {
  display: flex;
  justify-content: center;
}