relative и absolute

Создайте веб-страницу, показанную на рис. 1. Вид в браузере IE может несколько отличаться.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фотография коктейля</title>
  <style>
   body {
    background: #f7f6f2;
   }
   .cocktail {
    display: inline-block;
    padding: 12px;
    margin: 0;
    position: relative;
    overflow: hidden;
   }
   .cocktail::after, .cocktail::before {
    content: '';
    position: absolute;
    z-index: 2;
    width: 70px;
    height: 70px;
    left: -40px;
    bottom: -40px;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    outline: #c2b59d dashed 1px;
    outline-offset: -3px;
    background: #f7f6f2;
   }
   .cocktail::after {
    left: auto;
    right: -40px;
    top: -40px;
   }
   .cocktail img {
    display: block;
    padding: 4px;
    background: #dad6cf;
    border: 2px solid #c2b59d;
   }
  </style>
 </head>
 <body>
  <figure class="cocktail">
   <img src="image/cocktail.jpg" width="200" height="200" alt="Коктейль">
  </figure> 
  <figure class="cocktail">
   <img src="image/cocktail-2.jpg" width="200" height="200" alt="Коктейль">
  </figure> 
 </body>
</html>
Курс по вёрстке сайта на CSS Grid