.pag-casestudies--header {
  display:grid;
  grid-template-columns:34.222% auto;
  grid-gap:20px;
  margin-bottom: 40px;
}
.pag-casestudies--filter {
  display:flex;
}
.pag-casestudies--filter .filter {
  font-size: 1.2rem;
  border-bottom: 2px solid #26303c;
  margin: 10px;
  cursor:pointer;
  margin-bottom: 10px;
  display: inline-block;
}
.pag-casestudies--filter .filter:hover,
.pag-casestudies--filter .filter.active{
  color: #c42a2b;
  border-bottom: 2px solid #c42a2b;
} 
.pag-casestudies--inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:20px;
}
a.pag-casestudies--item {
  min-height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: block;
  text-decoration: none;
}
a.pag-casestudies--item:hover {
  text-decoration:none;
}
a.pag-casestudies--item .pag-casestudies--item-desc{
  padding: 10px 15px;
  background: white;
  position:absolute;
  bottom:15px;
  left: 15px;
}
.pag-casestudies--item-desc h3{
  letter-spacing: -0.42px;
  font-size: 42px;
  margin:0;
}
a.pag-casestudies--item b{
  color:#c42a2b;
  font-weight: 500;
}
@media(max-width: 991px){
  .pag-casestudies--item-desc h3{
    font-size: 1rem;
  }
  .pag-casestudies--header {
    grid-template-columns:1fr;
  }
  a.pag-casestudies--item {
    min-height: 350px;
  }
}
@media(max-width: 767px){
  .pag-casestudies--header {
    display:grid;
    grid-template-columns:1fr;
    grid-gap:40px;
  }
  .pag-casestudies--inner {
    grid-template-columns: 1fr 1fr;
  }
  .filters.pag-casestudies--filter {
    display:block;
  }
  a.pag-casestudies--item {
    min-height: 250px;
  }
}
@media(max-width: 479px){
  .pag-casestudies--inner {
    grid-template-columns: 1fr;
  }
  .pag-casestudies--item {
    min-height:200px;
    width:100%;
  }
}

/*  Needed for filters */

.pag-casestudies--hide { /* You can play with the seconds to change the "animation" */
  animation: pag_casestudies_hide .5s ease 0s 1 normal forwards;
  transform-origin: center;
  display:none !important;
}
.pag-casestudies--show { /* You can play with the seconds to change the "animation" */
  animation: pag_casestudies_show .5s ease 0s 1 normal forwards;    
  transform-origin: center;
}

@keyframes pag_casestudies_hide {
  0%{
    transform: scale(1);     
    display:block;
  }
  100% {
    transform: scale(0);        
    width: 0;
    height: 0;
    margin: 0;
    display:none;

  }
}
@keyframes pag_casestudies_show {
  0%{
    transform: scale(0);     
    width: 0;
    height: 0;
    margin: 0;   
    display:none;
  }
  100% {
    transform: scale(1); 
    display:block;
  }
}
/*  // Needed for filters */

.filters {
  display: flex;
  align-items: end;
}
/* // For decoration only */