import styled from 'styled-components';

export const Wrapper = styled.div`
   display: flex;
`;

export const GridContainer = styled.div`
   //max-width: 800px;
   display: flex;
   flex-wrap: wrap;
   //grid-template-columns: repeat(var(--col-count), 1fr);
   //grid-gap: 10px;
   //padding: 20px;
   //--col-count: 5;

   @media (max-width: 850px) {
      grid-template-columns: repeat(calc(var(--col-count) - 1), 1fr);
   }

   @media (max-width: 650px) {
      grid-template-columns: repeat(calc(var(--col-count) - 2), 1fr);
   }
`;

export const List = styled.div`
   display: grid;
   grid-auto-rows: max-content;
   box-sizing: border-box;
   min-width: 350px;
   grid-gap: 10px;
   padding: 20px;
   padding-bottom: 0;
   margin: 10px;
   border-radius: 5px;
   min-height: 200px;
   transition: background-color 350ms ease;
`;

export const ItemContainer = styled.div`
   display: flex;
   box-sizing: border-box;
   transform: translate3d(var(--translate-x, 0), var(--translate-y, 0), 0) scaleX(var(--scale-x, 1))
      scaleY(var(--scale-y, 1));
   transform-origin: 0 0;
   touch-action: manipulation;
   position: relative;
`;
