/* overlay content */
.nr-acf-block-posts-grid .subgrid .overlay {
  position: relative;
  display: flex;
  flex-direction: column; 
  justify-content:  flex-end; 
  align-items: flex-start;
  padding: 24px 24px 18px 24px;
  width: 100%;
  height: 100%;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  overflow: hidden;
}
.nr-acf-block-posts-grid .subgrid .overlay-content {
  position: relative;
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: flex-start;
  z-index: 2;
}
.nr-acf-block-posts-grid .subgrid .cat {
  display: block; 
  margin-top: 0;
  margin-bottom: auto;
  padding: 5px 10px; 
  color: #fff; 
  font-size: 0.85rem; 
  line-height: 1.1;
  text-transform: uppercase; 
  background-color: #00B5CC; 
  border-radius: 2px;
  z-index: 2;
}
.nr-acf-block-posts-grid .subgrid .date { display: inline; color: #fff; font-size: 0.85rem; margin-top: 0; margin-bottom: auto; }
.nr-acf-block-posts-grid .subgrid h3.title { dispay: block; color: #fff; font-size: 1.25rem;  font-weight: 700; line-height: 1.1; margin: 0;  }

/* hover effect */
.nr-acf-block-posts-grid .subgrid .overlay:hover h3.title { text-decoration: underline; }

.nr-acf-block-posts-grid .subgrid .overlay:before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(200deg, var(--global-palette1, #3182CE) 50%, var(--global-palette3, #1A202C) 100%);
  opacity: 0;
  -webkit-transition: opacity .25s cubic-bezier(0.2, 0.6, 0.3, 1);  
  transition: opacity .25s cubic-bezier(0.2, 0.6, 0.3, 1);			
  content: "";
  z-index: 1;
}

.nr-acf-block-posts-grid .subgrid .overlay:hover:before { opacity: 0.4;  }


/* phone */

.nr-acf-block-posts-grid .subgrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin-top: 20px;
}

.nr-acf-block-posts-grid .subgrid:first-child {
  margin-top: 0;
}

.nr-acf-block-posts-grid .subgrid > div {
  min-height: 240px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nr-acf-block-posts-grid .subgrid .div1 { grid-area: 1 / 1 / 2 / 2; }
.nr-acf-block-posts-grid .subgrid .div2 { grid-area: 2 / 1 / 3 / 2; }
.nr-acf-block-posts-grid .subgrid .div3 { grid-area: 3 / 1 / 4 / 2; }
.nr-acf-block-posts-grid .subgrid .div4 { grid-area: 4 / 1 / 5 / 2; }
.nr-acf-block-posts-grid .subgrid .div5 { grid-area: 5 / 1 / 6 / 2; }

/* tablet */
@media screen and (min-width:768px){
  .nr-acf-block-posts-grid .subgrid {
    /*height:  800px;*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  
  .nr-acf-block-posts-grid .subgrid > div { min-height: 250px; }
  
  .nr-acf-block-posts-grid .subgrid .div1 { grid-area: 1 / 1 / 2 / 2; }
  .nr-acf-block-posts-grid .subgrid .div2 { grid-area: 1 / 2 / 2 / 3; }
  .nr-acf-block-posts-grid .subgrid .div3 { grid-area: 2 / 1 / 3 / 2; }
  .nr-acf-block-posts-grid .subgrid .div4 { grid-area: 2 / 2 / 3 / 3; }
  .nr-acf-block-posts-grid .subgrid .div5 { grid-area: 3 / 1 / 4 / 3; }
  .nr-acf-block-posts-grid .subgrid .overlay { padding: 32px 32px 26px 32px; }
  .nr-acf-block-posts-grid .subgrid h3.title { font-size: 1.5rem; }
}

/* desktop */
@media screen and (min-width:1024px){
  .nr-acf-block-posts-grid .subgrid {
    /*height: 550px;*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  
  .nr-acf-block-posts-grid .subgrid > div { min-height: 265px; }
   
  .nr-acf-block-posts-grid .subgrid .div1 { grid-area: 1 / 1 / 2 / 2; }
  .nr-acf-block-posts-grid .subgrid .div2 { grid-area: 1 / 2 / 2 / 3; }
  .nr-acf-block-posts-grid .subgrid .div3 { grid-area: 1 / 3 / 2 / 4; }
  .nr-acf-block-posts-grid .subgrid .div4 { grid-area: 2 / 1 / 3 / 2; }
  .nr-acf-block-posts-grid .subgrid .div5 { grid-area: 2 / 2 / 3 / 4; }
}

/* Grid 1 box - phone, tablet & desktop */
.nr-acf-block-posts-grid .subgrid.subgrid1 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.nr-acf-block-posts-grid .subgrid.subgrid1 .div1 { grid-area: 1 / 1 / 2 / 2; }



/* Grid 2 boxes - phone */
.nr-acf-block-posts-grid .subgrid.subgrid2 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.nr-acf-block-posts-grid .subgrid.subgrid2 .div1 { grid-area: 1 / 1 / 2 / 2; }
.nr-acf-block-posts-grid .subgrid.subgrid2 .div2 { grid-area: 2 / 1 / 3 / 2; }

/* Grid 2 boxes - tablet & desktop */
@media screen and (min-width:768px){
  .nr-acf-block-posts-grid .subgrid.subgrid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  
  .nr-acf-block-posts-grid .subgrid.subgrid2 .div1 { grid-area: 1 / 1 / 2 / 2; }
  .nr-acf-block-posts-grid .subgrid.subgrid2 .div2 { grid-area: 1 / 2 / 2 / 3; }
  
}



/* Grid 3 boxes - phone */
.nr-acf-block-posts-grid .subgrid.subgrid3 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.nr-acf-block-posts-grid .subgrid.subgrid3 .div1 { grid-area: 1 / 1 / 2 / 2; }
.nr-acf-block-posts-grid .subgrid.subgrid3 .div2 { grid-area: 2 / 1 / 3 / 2; }
.nr-acf-block-posts-grid .subgrid.subgrid3 .div3 { grid-area: 3 / 1 / 4 / 2; }

/* Grid 3 boxes - tablet */
@media screen and (min-width:768px){
  .nr-acf-block-posts-grid .subgrid.subgrid3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .nr-acf-block-posts-grid .subgrid.subgrid3 .div1 { grid-area: 1 / 1 / 2 / 2; }
  .nr-acf-block-posts-grid .subgrid.subgrid3 .div2 { grid-area: 1 / 2 / 2 / 3; }
  .nr-acf-block-posts-grid .subgrid.subgrid3 .div3 { grid-area: 2 / 1 / 3 / 3; }
}

/* Grid 3 boxes - desktop */
@media screen and (min-width:1024px){
  .nr-acf-block-posts-grid .subgrid.subgrid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  
  .nr-acf-block-posts-grid .subgrid.subgrid3 .div1 { grid-area: 1 / 1 / 1 / 1; }
  .nr-acf-block-posts-grid .subgrid.subgrid3 .div2 { grid-area: 1 / 2 / 1 / 2; }
  .nr-acf-block-posts-grid .subgrid.subgrid3 .div3 { grid-area: 1 / 3 / 1 / 3; }
}



/* Grid 4 boxes - phone */
.nr-acf-block-posts-grid .subgrid.subgrid4 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.nr-acf-block-posts-grid .subgrid.subgrid4 .div1 { grid-area: 1 / 1 / 2 / 2; }
.nr-acf-block-posts-grid .subgrid.subgrid4 .div2 { grid-area: 2 / 1 / 3 / 2; }
.nr-acf-block-posts-grid .subgrid.subgrid4 .div3 { grid-area: 3 / 1 / 4 / 2; }
.nr-acf-block-posts-grid .subgrid.subgrid4 .div4 { grid-area: 4 / 1 / 5 / 2; }

/* Grid 4 boxes - tablet */
@media screen and (min-width:768px){
  .nr-acf-block-posts-grid .subgrid.subgrid4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div1 { grid-area: 1 / 1 / 2 / 2; }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div2 { grid-area: 1 / 2 / 2 / 3; }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div3 { grid-area: 2 / 1 / 3 / 2; }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div4 { grid-area: 2 / 2 / 3 / 3; }
}

/* Grid 4 boxes - desktop */
@media screen and (min-width:1024px){
  .nr-acf-block-posts-grid .subgrid.subgrid4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div1 { grid-area: 1 / 1 / 2 / 2; }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div2 { grid-area: 1 / 2 / 2 / 4; }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div3 { grid-area: 2 / 1 / 3 / 3; }
  .nr-acf-block-posts-grid .subgrid.subgrid4 .div4 { grid-area: 2 / 3 / 3 / 4; }
}