style.css

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-family: Helvetica, Arial, san-serif;

  background-color: #333;
}


.outlet {
  display: flex;
  flex-wrap: wrap;
  margin-top: 48px;
}


.gif-item {
  position: relative;

  width: 50%;
  height: 100px;

  cursor: pointer;
}


.gif-item__gif {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


.gif-item__delete {
  position: absolute;
  top: 5px;
  right: 5px;

  display: none;
}


.gif-item:hover .gif-item__delete {
  display: block;
}


.add-gif {
  display: flex;
  position: fixed;
  top: 8px;
  right: 8px;
  left: 8px;
  z-index: 100;
}


.add-gif__input,
.add-gif__button,
.options-button {
  height: 30px;

  cursor: pointer;
  outline: none;

  border: 2px solid lightgreen;
}


.add-gif__input {
  padding: 5px;
  margin-bottom: 10px;

  flex: 1;

  color: #fff;
  background-color: #666;
}


.add-gif__button {
  background-color: lightgreen;
}


.options-button {
  font-size: 20px;
  line-height: 20px;
  border: none;
}