/* Portada */

.blog-container-cover{
  width: 100%;
  height: 500px;
  position: relative;
  margin-top: 80px;
  background-image: url(../img/img3.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blog-container-cover:before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(25, 81, 235, 0.76);
  position: absolute;
  top: 0;
  left: 0;
}

.container-info-cover{
  max-width: 800px;
  height: 500px;
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}

.container-info-cover h1{
  font-size: 60px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 20px;
}

.container-info-cover p{
  color: #fff;
  font-size: 20px;
  font-weight: 300;
}



/* Contenedor de categorías */

input[type="radio"]{
  display: none;
}

.container-category{
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.container-category label{
  padding: 6px 40px;
  margin: 10px;
  font-size: 20px;
  background: #e2e2e2;
  border-radius: 5px;
  cursor: pointer;
}

.container-category label:hover{
  opacity: 0.8;
}



/* Posts - publicaciones */

.container-post{
  max-width: 1200px;
  margin: auto;
}

.posts{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin-top: 20px;
  padding: 20px;
}

.posts .post{
  background: #fff;
  box-shadow: 0 0 20px -20px black;
  border-radius: 6px;
  overflow: hidden;
  padding-bottom: 20px;
}

/*.posts*/ .post .ctn-img{
  width: 100%;
}

/*.posts*/ .post .ctn-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post h2{
  font-size: 18px;
  margin-top: 20px;
  padding: 0px 20px;
}

.post span{
  display: block;
  margin-top: 10px;
  padding: 0px 20px;
}

.ctn-tag{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-left: 16px;
  margin-top: 10px;
}

.ctn-tag li{
  list-style: none;
  font-size: 14px;
  margin: 4px;
  padding: 6px 10px;
  background: #e8e8e8;
  cursor: default;
}

.post button{
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px 50px;
  font-size: 16px;
  background: #46a2fd;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.post button:hover{
  opacity: 0.9;
}



/* Sistema de filtrado */

[value="TODOS"]:checked ~ .posts .post[data-category] {
  display: block;
}

[value="NORTE"]:checked ~ .posts .post:not([data-category~="NORTE"]),
[value="CATARATAS"]:checked ~ .posts .post:not([data-category~="CATARATAS"]),
[value="CENTRO"]:checked ~ .posts .post:not([data-category~="CENTRO"]),
[value="DELTA"]:checked ~ .posts .post:not([data-category~="DELTA"]),
[value="MENDOZA"]:checked ~ .posts .post:not([data-category~="MENDOZA"]),
[value="SUR"]:checked ~ .posts .post:not([data-category~="SUR"]),
[value="PATAGONIA"]:checked ~ .posts .post:not([data-category~="PATAGONIA"]){
  display: none;
}

[value="TODOS"]:checked ~ .container-category [for="TODOS"],
[value="NORTE"]:checked ~ .container-category [for="NORTE"],
[value="CATARATAS"]:checked ~ .container-category [for="CATARATAS"],
[value="CENTRO"]:checked ~ .container-category [for="CENTRO"],
[value="DELTA"]:checked ~ .container-category [for="DELTA"],
[value="MENDOZA"]:checked ~ .container-category [for="MENDOZA"],
[value="SUR"]:checked ~ .container-category [for="SUR"],
[value="PATAGONIA"]:checked ~ .container-category [for="PATAGONIA"]{
  background: #46a2df;
  color: #fff;
}



/* Responsividad */

@media screen and (max-width: 1200px){
  .posts{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 900px){
  .posts{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 580px){
  .posts{
    grid-template-columns: repeat(1, 1fr);
  }
}