/**
 * Screen sizes
 */
/**
  * Colors
  */
:root {
  --teal: #50bcbb;
  --red: #ea362e;
  --purple: #5c5889;
  --tan: #d3ba8b;
  --heading-font: "industry", sans-serif;
  --body-font: "Plus Jakarta Sans", sans-serif;
}

@keyframes wiggle {
  0%, 100% {
    transform: translate(-50px, 0) rotate(3deg);
  }
  25% {
    transform: translate(-50px, 0) rotate(10deg);
  }
  50% {
    transform: translate(-50px, 0) rotate(4deg);
  }
  75% {
    transform: translate(-50px, 0) rotate(20deg);
  }
}
.promise {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 2rem;
  border: 2px solid #d3ba8b;
  border-radius: 10px;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.promise-media {
  flex: 1 1 300px;
  padding-top: 4rem;
  position: relative;
}
.promise-media-text {
  position: absolute;
  left: 20%;
  z-index: 1;
}
@media (max-width: 550px) {
  .promise-media-text {
    left: 10%;
    top: 10%;
  }
}
.promise-media-face {
  margin: 0 auto -45px;
  display: block;
  transform: translate(-50px, 0) rotate(0);
  animation: 1s wiggle infinite ease;
}
@media (max-width: 550px) {
  .promise-media-face {
    width: 100px;
    margin-bottom: -35px;
  }
}
.promise-media-bowl {
  position: relative;
}
.promise-text {
  flex: 1 1 300px;
}
.promise-text h3 {
  text-transform: uppercase;
  margin-top: 4rem;
}