.container_grid{
  max-width:1200px;
  height: 1000px;
  position:relative;
  margin: 0 auto;
  column-gap:10px;
  columns:4;
  padding:10px 10px;
  transition: all 0.5s ease;
}
@media only screen and (max-width:950px) {
  .container_grid {
    columns: 3;
  }
}

@media only screen and (max-width: 650px) {
  .container_grid {
    columns: 2;
  }
}

@media only screen and (max-width: 390px) {
  .container_grid {
    columns:1;
  }
}


.card_small{
  height:320px;
}
.card_medium{
  height:390px;
}

.card_large{
  height:490px;
}

.container_grid [class*="card"]{
  max-height:auto;
  max-width:auto;
  border-radius:16px;
  margin:0 auto;
  margin-bottom:10px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition: all .5s ease;
}
.container_grid [class*="card"]:hover{
  scale:105%;
  z-index:998;
}

.img_card{
  width:100%;
  height:100%;
  object-fit:cover;
}

.container_grid figcaption{
  position: absolute;
  bottom: 20px;
  left:10px;
  color:white;
  font-size:16px;
  font-weight:600;
  z-index:999;
  /*background-color:rgba(1, 1, 1, 0.2);*/
  filter: drop-shadow(0 0 0.1rem black);
  text-shadow: 0px 0px 10px black;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
}

.carousel{
  display:none;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:9995;
}

#close-carousel{
  display:flex;
  position:fixed;
  //background-color:rgba(10,10,10,0.2);
  top:0;
  right:0;
  margin: 10px;
  width:50px;
  height:50px;
  border-radius:25px;
  cursor:pointer;
  z-index:9997;
}

.modal {
  display:none;
  position:fixed;
  opacity:1;
  z-index:9998;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-color:rgba(0,0,0,0.6);
  backdrop-filter: blur(5px);
  transition: all 0.5s ease;
}


.centered-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
  width:100%;
}

.modal-content {
  display: block;
  z-index: 9995;
  border-radius:15px;
  max-width: 40%;
  max-height: 70%;
}

.x{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
  width:100%;
  height:100%;
  transition: all 0.5s ease;
  z-index:10000;
}
#barra1, #barra2{
  position:absolute;
  background-color:white;
  color:red;
  width:4px;
  height:30px;
  border-radius:5px;
}
#barra1{
  transform:rotate(45deg);
}
#barra2{
  transform:rotate(-45deg);
}
.x:hover{
  transform:rotate(0.50turn);
  }
.setas{
  display:flex;
  position:fixed;
  height:100%;
  width:100%;
  z-index:9996;
  align-content: space-between;
  justify-content:center;
  align-items:center;
}
.fa-solid{
  position:fixed;
  font-size:calc(12px + 1.7vw);
  top: 50%;
  transform: translate(0, -50%);
  transition: all .3s ease;
}
.fa-angle-left{
  left:0;
  padding:0 0 0 2%;
}
.fa-angle-right{
  right:0;
  padding:0 2% 0 0;
}
.fa-solid:hover{
  font-size:calc(18px + 2vw);
}
#prev-card, #next-card{
  position:fixed;
  opacity:1;
  min-width:25vw;
  height:100%;
  transition: all .5s ease;
}

#prev-card{
  top:0;
  left:0;
  background: linear-gradient(90deg, rgba(27,27,27,0.5) 0%, rgba(247,247,247,0) 100%);
}
#next-card{
  top:0;
  right:0;
  background: linear-gradient(-90deg, rgba(27,27,27,0.5) 0%, rgba(247,247,247,0) 100%);
}
#next-card:hover{
  cursor:pointer;
  background: linear-gradient(-90deg, rgba(27,27,27,0.8) 0%, rgba(247,247,247,0) 100%);
}
#prev-card:hover{
  cursor:pointer;
  background: linear-gradient(90deg, rgba(27,27,27,0.8) 0%, rgba(247,247,247,0) 100%);}