* {
  box-sizing: border-box;
  font-family: "Century Gothic";
  text-align: start;
}

body {
  background: transparent;
  padding: 0;
  margin: 0;
}

.gallery {
  position: absolute;
  width: 100%;
  /* top: 10%; */
  color: transparent;
  height: 100%;
  overflow: hidden;
  margin-left: 2%;
  margin-right: 2%;
  }

.cards {
  position: absolute;
  width: 21rem;
  height: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cards li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 306px;
  height: 700px;
  text-align: center;
  font-size: 2rem;
  font-family: sans-serif;
  position: absolute;
  top: 0;
  left: 0;
}

.signs {
  display: inline-block;
  position: fixed;
  outline: none;
  border: none;
  cursor: pointer;
  top: 30%;
  width: 48px;
  background-color: transparent;
}

.prev {
  left: 0%;
}

.next {
  left: 93%;
  display: flex;
  justify-content: flex-end;
} 


.cards li div a img {
  height: 450px;
  width: 100%;
    
}


.cards li p {
  color: #ffffff;
  font-size: 16;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  padding-right: 8px;
  width: 100%;
}
.lity-iframe .lity-container {
  max-width: 640px;
}
.lity-iframe-container {
  padding-top: 75%; /* 4:3 ratio */
}
.lity-iframe{
  height: 450px;
  width: 100%;
}

/* @media screen and (max-width: 550px){

  .gallery{
    transform: scale(0.9);
  }  
} 
@media screen and (max-width: 460px){

  .gallery{
    transform: scale(0.85);
  }  
} 

@media screen and (max-width: 390px){

  .gallery{
    transform: scale(0.8);
  }  
  .cards{

  }
} 

@media screen and (max-width: 320px){

  .gallery{
    transform: scale(0.75);
    
    }  
    
  .cards{
    left: 20%;
  }
} 

@media screen and (max-width: 250px){

  .gallery{
    transform: scale(0.7);
  }  
} 

@media screen and (max-width: 180px){

  .gallery{
    transform: scale(0.65);
  }
}  */