.slider {
  background-color: black;
  position: absolute;
  bottom: 0;
  left: 100%;
  width: 100%;
  --padding-top: 3em;
  --padding-side: 6em;
  padding: var(--padding-top) var(--padding-side);
  height: calc(100vh - (2 * var(--padding-top)));
  color: white;
  max-width: 100vw;
  cursor: url(../images/drag-icon.svg), auto; }
  .slider article {
    max-width: 415px;
    -webkit-transform: translateX(100%);
            transform: translateX(100%); }
    .slider article h3 {
      margin: 0.5em 0; }
  .slider img {
    width: 100%;
    max-height: 33.3vh;
    height: auto; }
  .slider .progress {
    width: calc(100vw - (2 * var(--padding-side)));
    height: 0.25em;
    background-color: rgba(255, 255, 255, 0.4);
    position: relative;
    --progress: 0px; }
    .slider .progress .block {
      height: 0.5em;
      width: 33.3%;
      background-color: white;
      position: absolute;
      top: -0.125em;
      left: var(--progress);
      -webkit-transition: left 0.5s ease-in-out;
      transition: left 0.5s ease-in-out; }
  @media screen and (max-height: 670px) {
    .slider article {
      font-size: var(--step--1); } }
  @media screen and (max-width: 650px) {
    .slider article {
      max-width: calc(100vw - (2 * var(--padding-side))); }
      .slider article img {
        max-height: 100%;
        width: 100%; } }
  @media screen and (max-width: 450px) {
    .slider {
      --padding-side: 3em; } }
  @media screen and (max-width: 375px) {
    .slider {
      --padding-top: 2em;
      --padding-side: 2em; } }