@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    height: 100vh;
    overflow-x: hidden;
    font-family: "Montserrat", sans-serif;
}

nav {
  z-index: 9;
}

.blog > .blog1 {
    background-color: #672717;
    color: white;
    text-align: center;
    font-size: 5rem;
    height: 8rem;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 15px;
    padding: 0 10%;
}
  
.grid-container > div {
    background-color: transparent;
    border: 1px solid ghostwhite;
    box-shadow: 0px 0px 5px 1px #888888;
    text-align: left;
  /*  padding: 20px 20px; */
    font-size: 20px;
    border-radius: 15px 15px 15px 15px;
}

.grid-container > .item  > a {
       text-decoration: none;
       color: #303133;
       text-align: left;
       padding: 20px 20px;
       font-size: 25px;
}

.grid-container > div > a {
    text-decoration: none;
    color: #303133;
    text-align: left;
    padding: 0 20px;
}

.grid-container > .item > a:hover {
    text-decoration: none;
    color: #672717;
}

.grid-container > .item > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px 15px 15px 15px;
}

.blog > .grid-container > .item > .image img {
     width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 15px 15px 15px 15px;
 }

.blog > .grid-container > .item > .image img:hover {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 15px 15px 15px 15px;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

 .blog > .grid-container > .item > .content {
  text-decoration: none;
  color: #303133;
  text-align: start;
  padding: 0 20px;
  font-size: 2rem;
 }

 .blog > .grid-container > .item > .content:hover {
 text-decoration: none;
 color: #672717;
 }

.grid-container > .item > img:hover {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px 15px 15px 15px;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.grid-container > .item59 {
    border-color: transparent;
    box-shadow: none;
}

.footer > .button {
  background-color: #672717;
  color: white;
  border-radius: 25px; /* adjust the value to make the rounding more or less prominent */ 
  padding: 10px 20px; /* add some padding to the button content to make it look more spacious */
  border: none;  
  font-size: 15px;
  text-align: center;
  display: block;
  margin: auto;
}

/* .blog > .grid-container {
	display: flex;
  flex-wrap: wrap;
	flex-direction: row;
} */

@media only screen and (max-width: 600px) {
 .blog > .grid-container {
    display: flex;
    flex-direction: column;
    padding: 0% 0%;
   /* padding-right: 10%;
    padding-left: 10%; */
  }

  .blog > .grid-container > .item > .content {
    font-size: 20px;
    text-align: center;
  }

  .blog > .grid-container > .item > .content:hover {
    color: #672717;
  }

  .blog > .grid-container > .item > .image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  /*  padding-top: 20px; */
    width: 100%;
    height: 10%;
    border-radius: 15px 15px 15px 15px;
}
}

@media (max-width: 650px) {
  :root {
      font-size: 12px;
  }
}