.banner-lottie {
  position: relative;
  margin-bottom: -60px;

  .left-side {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .trapezoid-back {
    position: relative;
    display: block;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    color: white;
    height: 56px;
    width: 56px;
    background: #303030;
    border-radius: 100% 100% 0 0;
    transform: rotate(90deg);
    text-decoration: none;

    &:before {
      content: ' ';
      display: block;
      background: #303030;
      width: 24px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -10px;
      transform: skew(-24deg);
      border-radius: 8px 0px 0px 0px;
      z-index: -1;
    }
    &:after {
      content: ' ';
      display: block;
      background: #303030;
      width: 24px;
      height: 100%;
      position: absolute;
      top: 0;
      right: -10px;
      transform: skew(24deg);
      border-radius: 0px 8px 0px 0px;
      z-index: -1;
    }

    > * {
      transform: rotate(180deg);
    }

    .btn-arrow {
      width: 20px;
      transform: rotate(-90deg);
    }
  }

  .right-side {
    position: absolute;
    right: 0;
    bottom: 80px
  }

  .trapezoid-red {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    color: white;
    height: 100px;
    width: 100px;
    background: #ED0000;
    border-radius: 0 0 100% 100%;
    transform: rotate(90deg);
    text-decoration: none;

    &:before {
      content: ' ';
      display: block;
      background: #ED0000;
      width: 60px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -10px;
      transform: skew(24deg);
      border-radius: 0px 0px 0px 8px;
      z-index: -1;
    }
    &:after {
      content: ' ';
      display: block;
      background: #ED0000;
      width: 60px;
      height: 100%;
      position: absolute;
      top: 0;
      right: -10px;
      transform: skew(-24deg);
      border-radius: 0px 0px 8px 0px;
      z-index: -1;
    }

    > * {
      transform: rotate(270deg);
    }

    > img {
      margin-left: 12px;
      margin-right: -12px;
    }
  }

  .bottom-side {
    position: absolute;
    bottom: 28px;
  }
}