@import "main.css";

#filterBar{
  position:fixed;
  top:60px;
  left:0;
  width: 100%;
  height:100px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  z-index:5;
  background-color: #fff;
  gap:10px;
  a{margin:0 5px;}
}

#wrapItems{
  position:relative;
  margin-top:60px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  z-index:1;

  .card{
    width:calc(100% / 2);
    text-align: center;

    .img{
      position:relative;
      width: 100%;
      height:200px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .text{
      padding:10px;
      height:130px;
    }
    .card-footer{
      background-color: rgb(198,156,85);
      padding:0;

      a{width:100%;}
    }
  }
}

#totalItems{
  position: relative;
  width:100%;
  padding:20px 0;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  z-index: 200;
  text-align: center;
}
.fixed {
  position: fixed !important;
  top: 60px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #wrapItems .card{ width:calc(100% / 3); }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  #wrapItems .card{ width:calc(100% / 3); }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #wrapItems .card{ width:calc(100% / 4); }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #wrapItems .card{ width:calc(100% / 6); }
}