/* Lesson-specific stuff. Start here */

/* section 1 - object fit */
img.destroyed {
  width: 100%;
  height: 200px;
}

img.fitted {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: 0 40%;
}

/* section 2 - picture element with object-fit when needed */
/* remember, style the img, not the <picture> or <source> tag */
img.dog-local {
  width: 1200px;
  height: 650px;
  max-width: 100%;
  object-fit: cover;
  object-position: 0 65%;
}

@media (max-width: 550px) {
  img.dog-local {
    width: 100%;
    height: auto;
  }
}

/* section 3 - picture element with CDN links. No need for object fit or any custom CSS. 
Just make sure image is set to width: 100% */
.dog-cdn {
  width: 100%;
}

/* section 4 - add @media query for touch devices */
.content {
  position: relative;
  margin-top: 1rem;
}
.words {
  position: absolute;
  padding: 5rem;
  background-color: teal;
  color: hsla(0, 0%, 100%, 0.9);
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.3s all ease-in-out;
}

@media (pointer: fine) {
  /* write code in here that you want to run only when user is on a device with a mouse*/
  .content:hover .words {
    opacity: 1;
    transition: 0.3s all ease-in-out;
  }
}

@media (pointer: coarse) {
  /* write code in here that you want to run only when user is on a device with a mouse*/
  .words {
    opacity: 1;
    position: static;
    height: auto;
    background-color: transparent;
    padding: 0.5rem;
    padding-left: 0;
    color: initial;
  }
  .words p {
    display: none;
  }
}