/*PEN STYLES*/

* {
   box-sizing: border-box;
 }
  
 .blog-card {
   display: flex;
   flex-direction: column;
   margin: 1rem auto;
   box-shadow: 0 3px 7px -1px rgba(#000, .1);
   margin-bottom: 1.6%;
   background: #dee4d337;
   line-height: 1.4;
   /* font-family: sans-serif; */
   border-radius: 5px;
   overflow: hidden;
   z-index: 0;
   a {
     color: inherit;
     &:hover {
       color: rgb(35, 63, 41);
     }
   }
   &:hover {
     .photo {
       transform: scale(1.1) rotate(1deg);
     }
   }
   .meta {
     position: relative;
     z-index: 0;
     height: 200px;
   }
   .photo {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-size: cover;
     background-position: center;
     transition: transform .2s;
   }
   .description {
     padding: 1rem;
     background: #dee4d337;
     position: relative;
     z-index: 1;
     h1,
     h2 {
      font-family: Poppins, sans-serif;
      line-height: 1.4em;
    }
     h1 {
       text-align: left;
       line-height: 1;
       margin: 0;
       font-size: 20px;
     }
     h2 {
       text-align: left;
       font-size: 1rem;
       font-weight: 300;
       text-transform: uppercase;
       color: #a2a2a2;
       margin-top: 5px;
     }
     .read-more {
       text-align: right;
       a {
         color: rgb(35, 63, 41);
         display: inline-block;
         position: relative;
         &:after {
           content: "\f061";
           font-family: FontAwesome;
           margin-left: -10px;
           opacity: 0;
           vertical-align: middle;
           transition: margin .3s, opacity .3s;
         }
 
         &:hover:after {
           margin-left: 5px;
           opacity: 1;
         }
       }
     }
   }
   p {
     position: relative;
     margin: 1rem 0 0;
     &:first-of-type {
       margin-top: 1.25rem;
       &:before {
         content: "";
         position: absolute;
         height: 5px;
         background: rgb(35, 63, 41);
         width: 35px;
         top: -0.75rem;
         border-radius: 3px;
       }
     }
   }
   &:hover {
     .details {
       left: 0%;
     }
   }
 
 
   @media (min-width: 750px) {
     flex-direction: row;
     max-width: 900px;
     width: 90%;
     .meta {
       flex-basis: 40%;
       height: auto;
     }
     .description {
       flex-basis: 60%;
       &:before {
         transform: skewX(-3deg);
         content: "";
         background: #dee4d337;
         width: 30px;
         position: absolute;
         left: -10px;
         top: 0;
         bottom: 0;
         z-index: -1;
       }
     }
     &.alt {
       flex-direction: row-reverse;
       .description {
         &:before {
           left: inherit;
           right: -10px;
           transform: skew(3deg)
         }
       }
       .details {
         padding-left: 25px;
       }
     }
   }
 }

/* ---------------------------------------------- */
/* body {
  background: #e5ded8;
  box-sizing: border-box;
} */

.blog-container {
  background: #dee4d337;
  border-radius: 5px;
  max-width: 900px;
  width: 90%;
  font-weight: 100;
  margin: 48px auto;
  width: 100%;
  /* @media screen and (min-width: 480px) {
    width: 28rem;
  }
  @media screen and (min-width: 767px) {
    width: 40rem;
  }
  @media screen and (min-width: 959px) {
    width: 50rem;
  } */
}
.blog-container a {
  color: rgb(35, 63, 41);
  text-decoration: none;
  transition: .25s ease;
  &:hover {
    border-color: rgb(82, 109, 67);
    color: rgb(82, 109, 67);
  }
}

.blog-cover {
  background-size: cover;
  border-radius: 5px 5px 0 0;
  aspect-ratio: 2000 / 750;
  box-shadow: inset hsla(0, 0, 0, .2) 0 64px 64px 16px;
}

.blog-body {
  margin: 0 auto;
  padding-bottom: 5px;
  width: 90%;
}

.blog-summary p {
  color: lighten(#333, 10%);
}
.blog-tags ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
}
.blog-tags li + li {
  margin-left: .5rem;
}
.blog-tags a {
  border: 1px solid lighten(#333, 40%);
  border-radius: 3px;
  color: lighten(#333, 40%);
  font-size: .75rem;
  height: 1.5rem;
  line-height: 1.5rem;
  letter-spacing: 1px;
  padding: 0 .5rem;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  width: 5rem;
}


/* ---------------------------------------------- */

.btn {
  background-color: #dee4d337;
  border: 1px solid #adb79837;
  border-radius: 1rem;
  color: #696969;
  padding: 0.5rem;
  text-transform: lowercase;
}

.btn--block {
  display: block;
  width: 100%;
}
 
.cards {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  max-width: 932px;
  margin: 0 auto;
}

.card a{
  &:hover {
    border-color: rgb(82, 109, 67);
    color: rgb(82, 109, 67);
    text-decoration: none;
  }
}

.cards__item {
  display: flex;
  padding: 1rem;
  @media(min-width: 40rem) {
    width: 50%;
  }
  @media(min-width: 56rem) {
    width: 50%;
  }
}

.card {
  background-color: #dee4d337;
  border-radius: 0.25rem;
  /* box-shadow: 0 20px 40px -14px rgba(0,0,0,0.25); */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  &:hover {
    .card__image {
      filter: contrast(100%);
    }
  }
}

.card__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1rem;
}

.card__image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  filter: contrast(70%);
  filter: saturate(180%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(.43,.41,.22,.91);;
  &::before {
    content: "";
	  display: block;
    padding-top: 56.25%; 
  }
  @media(min-width: 40rem) {
    &::before {
      padding-top: 66.6%; 
    }
  }
}

.card__image--flowers {
  background-image: url(https://unsplash.it/800/600?image=82);
}

.card__image--river {
  background-image: url(https://unsplash.it/800/600?image=11);
}

.card__image--record {
  background-image: url(https://unsplash.it/800/600?image=39);
}

.card__image--fence {
  background-image: url(https://unsplash.it/800/600?image=59);
}

.card__title {
  color: rgb(35, 63, 41);
  font-weight: 300;
  /* letter-spacing: 2px; */
}

.card__title h2{
  margin:10px;
  font-size: 1.4em;
}

.card__text {
  flex: 1 1 auto;
    /* margin-bottom: 1.25rem; */
}