.content{
position:relative;
max-width: 100%;
max-height:100%;
padding-left:60px;
padding-right:60px;
padding-bottom: 60px;
}


.section-title{
  font-family: 'Imperial Script' "Sofia";
  position: relative;
  font-size: 4.5rem;
  font-weight: 600;
  text-align: center;
}
.cards{
margin-top: 70px;
  width: 100%;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-auto-rows: auto;
grid-area:content;
  gap:20px;
  font-family:"sofia", sans-serif;
  padding-top: 30px;
padding-bottom: 40px;
float: left;
  width: 100%;
  padding: 0 10px;
  max-height: 100%;
  max-width: 100%;
  align-items: center;
  }
:var{
  --text-color: #000000;}

.store-item-icon {
position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.75rem;
  /*background: var(--mainYellow);*/
  box-shadow: 25px 10px 0px 0px blue;
  border-top-left-radius: 1rem;
  transition: all 1s ease-in-out;
  transform: translate(100%, 100%);
  width:60px;
}

.store-item{
}

.card {

max-width: 350px;
max-height: 100%;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
  overflow: hidden;
height:calc(95vh/1.5);

}

/*img{
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  width: 100%;
}*/
.img-container {
  max-height: 100%;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-color: Pink;
  border-width: 3px;


}
.store-img {
  transition: all 0.5s ease-in-out;
  width:100%;
  height: auto;
  object-fit: cover;
}
.card:hover{
  border: 2px solid var( --text-color);
}
.img-container:hover .store-img {
  transform: scale(1.2);
}

.img-container:hover .store-item-icon {
  transform: translate(0, 0);
}
.store-item-icon:hover {
  background-color: #ffb3cc;
  opacity:0.8;
  color: var(--mainWhite);
  transition: all 0.5s;
}
#store-item-name {
  font-family: 'Imperial Script', cursive;
  font-size: 4vh;
}
.store-item-name{
  font-family: 'Imperial Script', cursive;
  font-size: 4vh;
}

.store-item-value {
  font-family:"Sofia",sans-serif;
  font-size: 2.2vh;
}
  #store-item-price {
    font-family:"Sofia",sans-serif;
    font-size:2.2vh;

}
.store-item-description {
  font-family:"Sofia",sans-serif;
  font-size: 1.4vh;

}
 .Izpardots{
   object-fit: cover;
   font-size: 60px;
   font-family: sans-serif;
   letter-spacing: -5px;
   color: red;
   text-align:center;
  weight: bolder;
  z-index: 2;
  padding-top:60px;
  overflow-y: visible;
  position: absolute;
    bottom: 30px;
    left: 0px;
    right: 0px;
    padding: 0.75rem;

 }


 .pagination-buttons {
 margin: auto;
   margin-bottom: 3rem;
   display:absolute;
   align-items: center;
     padding-top: 3vh;
     color: red;
 }

 .page-btn {
  background: #ddd;
  color: #2c303a;
  height: 35px;
  border-radius: 2px;
  padding: 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background 0.3s ease;
  margin: 0 2px

}

.page-btn:first-of-type {
  margin-left: 0;
}

.page-btn:last-of-type {
  margin-right: 0;
}

.page-btn:not([class$="-page"]) {
  width: 35px;
}



.page-btn[class*="-page"] {
  background: #ccc;
  font-size: 0.6em;
  font-weight: 700;
}

.page-btn.active {
  background: #717790;
  color: #fff;
}

.page-btn[disabled] {
  opacity: 0.3;
}


/* Responsive columns - one column layout (vertical) on small screens */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;

    display:block;
    margin-bottom: 20px;
  }
  .card{
    width:90%;
    height: 100%;
  }
  .cards-text h2{
    font-size: 3vh;

  }

  .cards-text h2{
    font-size: 1.5vh;

  }

  .cards-text h2{
    font-size: 0.8vh

  }

}