.making-mascot {
  display: none;
}

@media (max-width: 900px) {
  .making-mascot {
    position: relative;
    display: block;
    height: 250px;
    margin: -13px -13px 16px;
    overflow: hidden;
    background: #ffdd3d;
  }

  .making-mascot-head {
    position: absolute;
    left: 50%;
    bottom: -52px;
    width: 310px;
    height: 260px;
    transform: translateX(-50%);
    border-radius: 48% 52% 18% 18%;
    background: #1766f5;
  }

  .making-mascot-hair {
    position: absolute;
    top: -18px;
    left: 28px;
    width: 254px;
    height: 74px;
    border-radius: 50%;
    background: #ff4e16;
  }

  .making-mascot-eye {
    position: absolute;
    top: 92px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fff;
  }

  .making-mascot-eye::after {
    content: "";
    position: absolute;
    top: 23px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #090909;
  }

  .making-mascot-eye.left {
    left: 67px;
    transform: rotate(8deg);
  }

  .making-mascot-eye.left::after {
    right: 11px;
  }

  .making-mascot-eye.right {
    right: 67px;
    transform: rotate(-8deg);
  }

  .making-mascot-eye.right::after {
    left: 11px;
  }

  .making-mascot-mouth {
    position: absolute;
    top: 181px;
    left: 50%;
    width: 64px;
    height: 22px;
    transform: translateX(-50%) rotate(-3deg);
    border-radius: 50%;
    background: #090909;
  }

  .making-mascot-pencil {
    position: absolute;
    top: 45px;
    right: 22px;
    width: 18px;
    height: 82px;
    transform: rotate(24deg);
    border: 4px solid #090909;
    background: #f6a5dd;
  }

  .making-mascot-spark {
    position: absolute;
    top: 28px;
    left: 26px;
    color: #090909;
    font-family: var(--display-font);
    font-size: 3.4rem;
    line-height: 1;
    transform: rotate(-12deg);
  }

  .making-mascot-label {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 18px;
    font-family: var(--display-font);
    font-size: .82rem;
    color: #090909;
  }
}