.blog{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;

}

.post {
    background-color: bisque;
    padding: 20px 0 35px 0;
    box-sizing: border-box;    
    border-radius:20px;
}

[data-state="closed"] {
    width: 100%;
    height: auto;
    transition: all 0.3s ease;
}

[data-state="open"] {
  height: fit-content;
    position: absolute;
    z-index: 999;
    width: 100%;
  cursor: pointer;  
  transition: all 0.3s ease; 
}

[data-state="open"] > img {
width:30vw;
max-height: 400px;
}

[data-state="closed"] > img {  
  height: 200px;
  width: 200px;
}

.post>h2 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    height: 32px;
}

.post > img { 
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  object-fit: cover;
}

/* h1,h2,h3,h4,h5,p,ul,li,a,.titleCard,.textCard,.close,button {
    font-family: sans-serif;
    padding:0;
    margin:0;    
    font-size: 17px;
    font-weight: normal;
} */
/* 
p {
  margin-top: 20px;
}

a {
    text-decoration: none;
    color: black;
} */

p.title,.titleCard {
  background: white;
  width: max-content;
  padding: 8px;
  outline-style: solid;
  outline-width:3px;
  outline-color:black;
  outline-offset: -3px;
}

.wp-block-image, h2>img, p>img, span>img {
  display: none;
}

/* body,html {
    margin:0;
    padding:0;
} */

/* .myPage{
  margin: 8px;
} */

/* .myLinks{
  background: white;
} */



div#textCard {
    padding-top: 14px;
}


/* #imgSpace {
  visibility: hidden;
} */

/* form,.centretitle {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

.centretitle h3{
  font-size: 50px;
} */

/* input {
  margin-bottom: 20px;
  height: 30px;
} */

.modalCard {
  padding: 20px;
  width: 50vw;
  height: max-content;
  position: relative;
  top: 20px;
  left: 20px;
  background-color: white;
  color: black;
}

.preloader {
  position: fixed;
  z-index: -99999;
  height: 1px;
  width:1px;
  top:60px;
  left:99px;
  overflow: hidden;
}

  @media screen and (max-width: 600px) {

    [data-state="open"] > img {
      width: 50vw;
      max-height: 400px;
      }

    .blog {
      display: block;
    }
  
   
    .textCard {
      font-size:14px;
}


.post {
  margin-bottom: 10px;  
}

}