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

:root {
  font-family: 'Open Sans', sans-serif;
  --main-padding: 1rem;
  --color-one: #979797;
  --color-two: #9d9d9d;
  --color-three: #eeeeee;
  --color-four: #009688;
  --color-five: #f1f2f2;
}

.product {
  max-width: 22rem;
  margin: auto;
  padding: 1rem;
  background-color: var(--color-three);
}

.product__image {
  overflow: hidden;
  background-image: url('images/lloyd-dirks-0vsk2_9dkqo-unsplash.webp');
  max-width: 100%;
  height: 208px;
  background-size: cover;
}

.product-info {
  position: relative;
  padding: 1rem;
  background-color: white;
  padding-top: 2rem;
}

.product-info__profile-image {
  position: absolute;
  right: 2rem;
  top: -2rem;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 50%;
  border: 0.2rem solid white;
  -webkit-box-shadow: 0px 4px 4px 1px #ddd;
  box-shadow: 0px 4px 4px 1px #ddd;
}

.product-info__profile-image img {
  border-radius: 0;
  width: 5rem;
  position: absolute;
  top: -12px;
  left: -14px;
}

.general__name {
  margin-top: 0;
}

.general__owner,
.general__field {
  color: var(--color-four);
  font-weight: bold;
  cursor: pointer;
}

.general__field i {
  color: #777;
  padding-right: 0.2rem;
}

.description__locatio i {
  color: var(--color-four);
  padding-right: 0.3rem;
}

.product-info__stats {
  background-color: var(--color-five);
}

.stats__bar {
  width: 50%;
  height: 0.9rem;
  border-radius: 0 0.3rem 0.3rem 0;
  background-color: var(--color-four);
}

.stats__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 1rem;
  background-color: #ffffff;
}

.stats__info div span.value {
  display: block;
  font-weight: bold;
}

@media screen and (min-width: 300px) {
  .info {
    padding-top: 1rem;
  }
}

/* personal footer */

footer {
  margin-top: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  line-height: 1.5;
  text-align: center;
}

.platform {
  font-weight: 600;
  color: #2eca7f;
}

.coder {
  font-weight: 600;
  color: #cf2937;
}

a {
  text-decoration: none;
}