.wrapper {
  background-color: #af28bb;
  position: relative;
  margin: auto;
  height: 540px;
  width: 340px;
  overflow: hidden;
  .content {
    position: relative;
    height: calc(540px - 50px);
    width: 340px;
    overflow: hidden;
  }
  .background-image {
    background-size: cover;
    background-image: url('/assets/images/background.png');
    background-position: center center;
    background-repeat: no-repeat;
  }
  .featured,
  .article,
  .history,
  .options {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden; // new
  }
  .featured {
    transform: translateY(-100%);
    transform-origin: center;
    transition: transform 0.4s;
    will-change: transform;
  }
  .article {
    transform: translateY(100%);
    transform-origin: center;
    transition: transform 0.4s;
    will-change: transform;
  }
  .history {
    transform: scaleX(0);
    transform-origin: 50% 0%;
    transition: transform 0.4s;
    will-change: transform;
  }
  .options {
    transform: scaleX(0);
    transform-origin: 50% 0%;
    transition: transform 0.4s;
    will-change: transform;
  }
}

[data-screen="screen-featured"] .content .featured {
  transform: translateY(0);
}

[data-screen="screen-article"] .content .article {
  transform: translateY(0);
}

[data-screen="screen-history"] .content .history {
  transform: scaleX(1);
}

[data-screen="screen-options"] .content .options {
  transform: scaleX(1);
}

.action-buttons {
  left: 15px; 
  bottom: 16px !important;
}

.fixed-action-btn.direction-right ul li {
  margin: 6.5px 0 0 14px !important;
}