<section class="stacked-cards">
  <div class="section-header">
    <h2>
      Популярное <br>
      в <br>
      этом <br>
      месяце
    </h2>
    <p>Товары, которые больше всего купили за последние 30 дней</p>
  </div>
  <div class="card-grid">
    <div class="childs">
      <article class="child">
        <h2><a href="#">Lorem ipsum dolor</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptas adipisci voluptates, ex minima dignissimos Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Lorem ipsum dolor sit amet</a></h2> 
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Lorem</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptas adipisci voluptates, ex minima dignissimos praesentium eligendi possimus sapiente enim autem tempore.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Lorem ipsum dolor sit amet consectetur</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptas adipisci voluptates, ex minima dignissimos praesentium eligendi possimus sapiente enim autem tempore. Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Title</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Title</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Title</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Title</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Title</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
      <article class="child">
        <h2><a href="#">Title</a></h2>
        <img src="https://lh3.googleusercontent.com/4oABLB2KfrMWEyk6pYXp6Nv580pqvSvd2LLNkgFnUJ6ejFfLp7q9I4MtuZ_C80w2Xw=w300" />
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, perferendis nesciunt tenetur deserunt animi odio repellat.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel vero non enim placeat dolorem iste repellendus est sequi, exercitationem velit? </p>
        <div class="buttons">
          
          <button class="button detail">Подробнее</button>
        </div>
      </article>
    </div>
  </div>
</section>

body {
  background: #0d0c13;
  color: #888;
  
  font-size: 14px;
  line-height: 1.2;
  
  font-family: 'Fira Sans', Tahoma, sans-serif;
}

* {
  border-box: content;
}

.stacked-cards {
  display: flex;
  overflow-x: scroll;
  
  padding-left: 1rem;
  
  .card-grid {
    padding: 3rem;
    min-width: 220px;
  }
  
  .section-header {
    background-image: linear-gradient(0deg,#ff8a00,#e52e71);
    
    position: relative;
    
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    flex: 0;
    
    margin: 3rem 0;
    
    width: 110px;
    padding: 2rem;
    border-radius: 16px;
    
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    
    br {
      display: none;
    }
    
    &>h2 {
      color: #fff;
      font-size: 1.6rem;
      margin: 0 0 .5rem;
    }
    
    &>p {
      margin: 0;
      font-size: .8rem;
      color: #ffb4b4;
    }
  }
  
  .childs {
    $translateX: 2rem;
    display: flex;
    overflow-x: visible;
  
    .child {
      margin: 0;
      padding: 1.5rem;
      background-color: #17141d;
      border-radius: .5rem;
      box-shadow: -1rem 0 3rem #000;
      transition: .2s;

      min-width: 220px;
      min-height: 350px;

      display: flex;
      flex-direction: column;

      &:not(:first-child) {
        margin-left: -$translateX;
      }

      &:hover,
      &:focus-within {
        transform: translateY(-$translateX/2);

          & ~ .child {
            transform: translateX($translateX);
            }
      }

      &>img {
        width: 80%;
        margin: .5rem 0;
      }

      &>h2 {
        &>a {
          color: white;
          text-decoration: none;
        }
      }

      p {
        color: #7a7a8c;
      }
    }

    .buttons {
      display: flex;
      .button {
      outline: none;
      border: none;

      color: #7a7a8c;
      text-transform: uppercase;

      white-space: nowrap;
      border: 3px solid #28242f;
      border-radius: 2rem;
      padding: .2rem .85rem .25rem;

      margin-right: .5rem;

      background-color: #17141d;
      color: #c1c1d0;

      &:hover {
        border-color: #545465;
        cursor: pointer;
      }
    }
    }
  }
}

.stacked-cards {
  h2 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: .5rem;
  }
  
  p {
    margin-bottom: 1rem;
  }
}