#style-1 {
  padding: 1.5rem 3rem 3rem
}

.style-1-item-wrapper {
  width: 100%;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  grid-gap: 20px 20px !important
}

.style-1-item-second {
  width: 66% !important
}

.style-1-item {
  overflow: hidden;
  height: 240px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: rgba(0, 0, 0, .19) 0 -4px 4px, rgba(0, 0, 0, .23) 0 -6px 3px;
  -moz-box-shadow: rgba(0, 0, 0, .19) 0 -4px 4px, rgba(0, 0, 0, .23) 0 -6px 3px;
  box-shadow: rgba(0, 0, 0, .19) 0 -4px 4px, rgba(0, 0, 0, .23) 0 -6px 3px;
  margin-bottom: 20px;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  width: 32%
}

.style-1-item:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .31);
  z-index: 2;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}

.style-1-item:hover:before {
  background: rgba(0, 0, 0, 0);
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}

.style-1-img-thumbnail {
  top: 0;
  left: 0;
  z-index: 1;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: scroll;
  background-position: center;
  background-repeat: repeat;
  -moz-background-origin: content-box;
  -o-background-origin: content-box;
  background-origin: content-box
}

.style-1-title {
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  margin-right: 1.5rem
}

.style-1-title h3 {
  color: #fff
}

.style-1-title a {
  font-size: 1.3rem;
  font-family: Quicksand, sans-serif;
  font-weight: 700;
  color: #fff
}

.style-1-title a:hover {
  color: inherit
}

.style-1-category-name {
  top: 1.5rem;
  left: 1.5rem;
  padding: 6px 20px;
  z-index: 3;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
  -moz-box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .3);
  background: #4db7fe;
  cursor: pointer;
  max-width: 90%;
  overflow: hidden
}

.style-1-category-name a {
  font-size: 11px;
  font-weight: 600;
  color: #fff
}

.style-1-category-name:hover {
  background: #ec2a57
}

.style-1 .style-1-item:hover .style-1-title {
  background: rgba(0, 0, 0, .41) !important;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s
}

.style-1 .style-1-title {
  padding: 6px 10px;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -o-transition: .5s;
  transition: .5s
}

@media screen and (max-width:576px) {
  #style-1 {
    padding: 1.5rem .5rem 4rem
  }

  .style-1-item {
    height: 300px;
    width: 100% !important;
    padding: 0px 1.5rem;
  }

  .style-1-title a {
    font-size: 1.1rem
  }

  .style-1-item-wrapper {
    grid-template-columns: 1fr !important;
    padding: 0 5px
  }

  .style-1-item {
    height: 240px;
    width: 100%
  }

  .style-1 .mb-4 {
    margin-bottom: 1rem !important
  }
}

@media screen and (min-width:576px) and (max-width:767px) {
  .style-1-item {
    height: 300px;
    width: 100% !important;
    padding: 0px 1.5rem;
  }
}

@media screen and (min-width:768px) and (max-width:991px) {
  .style-1-item {
    height: 200px
  }

  .style-1-title a {
    font-size: 1.1rem
  }

  .style-1-item-wrapper.list-grid-1-2, .style-1-item-wrapper.list-grid-2-1 {
    grid-template-columns: 1fr 1fr !important;
    grid-gap: 30px 30px !important
  }

  .style-1-item-wrapper.list-grid-1-1-1 {
    grid-template-columns: 1fr !important
  }

  .style-1-item-wrapper.list-grid-1-1-1 .style-1-title a {
    font-size: 1.4rem
  }

  .style-1-item-wrapper.mb-4 {
    margin-bottom: 1rem !important
  }
}