.blog-subtitle {
    max-width: 100%;
    margin: 0px auto 32px auto;
    font-family: Rubik;
    color: #153743;
    text-align: center;
    padding: 0 16px;
    width: 550px;
}
.blog-subtitle h2 {
    font-size: 30px;
}
.animation-thumbnail-blog {
	max-width: 90%; 
	width: 620px;
}

.blog-materials-wrap .blog-index__post {    
	max-height: 444px;
   margin: 40px 30px;
  transition: transform 0.4s ease-out;
  transform: scale(1);
}

.blog-bookmarks-wrap .blog-index__post {
	position: relative;
    transition: transform 0.4s ease-out;
  transform: scale(1);
}

.blog-materials-wrap .blog-index__post:hover/*,
.blog-bookmarks-content-wrap:hover*/ {    
	transform: scale(1.05);
}
	
	
.blog-materials-wrap .blog-index__post-image-wrapper {
    object-fit: cover;
    max-height: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.blog-materials-wrap .blog-index__post-content {
    position: absolute;
    bottom: 0;
    border-radius: 6px;
    background: rgb(21,55,67);
    background: linear-gradient(180deg, rgba(21,55,67,0) 0%, rgba(21,55,67,0.6036968498336834) 38%, rgba(21,55,67,1) 100%);
    height: 100%;
	width: 100%;
	padding: unset;
	visibility: hidden;	
  /*visibility: visible;*/
  display: none;
}

/*.blog-index__post img:hover .blog-materials-wrap .blog-index__post-content {
  visibility: visible;
}*/

.blog-materials-wrap .blog-materials-content-wrap {
    position: absolute;
    bottom: 0;
    padding: 24px;
}

.blog-materials-wrap .blog-index__post-content a {
    color: #fff;
}

.blog-materials-wrap .blog-index__post-tag-link {
    background-color: #ffffff;
    color: #2d323e!important; 
}
@media screen and (max-width: 768px) {
.blog-materials-wrap .blog-index__post {
    max-height: 400px;
}
}
@media screen and (min-width: 200px) and (max-width: 500px) {
.blog-materials-wrap .blog-index__post {
    max-width: 75%;
    flex: auto;
}
}

.blog-bookmarks-wrap .blog-index__post-content p {
	font-size: 14px;
    font-weight: 500;
	margin-bottom: 0px;
}
.blog-bookmarks-wrap .blog-index__post-content {
    padding: 24px 16px 16px;
	border: solid #A8BBC266;
    border-width: 1px 0 0;
}
/*@media screen and (min-width: 1100px)*/
.blog-bookmarks-wrap .blog-index__post {
    max-width: 325px;
}
.blog-bookmarks-wrap .animation-thumbnail-blog {
    width: 142px;
  position: absolute;
    top: 22px;
    right: 0;
}
.blog-bookmarks-wrap h2.blog-index__post-title {
    font-size: 24px;
    padding: 60px 0 120px 16px;
    position: relative;
    z-index: 1;
    width: fit-content;
    height: 60px;
    max-width: 202px;
}
.blog-bookmarks-wrap h2.blog-index__post-title a {
    color: #153743;
}
.blog-bookmarks-wrap h2.blog-index__post-title a:hover {
    text-decoration: none;
}


@media screen and (min-width: 200px) {
  .blog-bookmarks-wrap .blog-index__post {
	  flex: auto;
  }
}

.blog-bookmarks-content-wrap {
 cursor: pointer 
}

/* Card grid: three columns whose outer edges line up with the 1080px
   resources tab bar. The 1110px row is 1080px of cards plus the 15px side
   margins every card already has. */
@media screen and (min-width: 1100px) {
  .blog-index-div .blog-index {
    max-width: 1110px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
  }

  .blog-index-div .blog-index__post {
    flex: 0 0 calc(33.3333% - 30px);
    max-width: calc(33.3333% - 30px);
  }
}

/* The thumbnail macro sets an inline max-width of 320px; the cards are wider
   now, and the srcset already has 2x and 3x sizes. */
.blog-index-div .blog-index__post-image--card {
  max-width: 100% !important;
}

/* Accessibility
   ------------------------------------------------------------------ */

/* Cards used to wrap everything in one link, which nested the title and tag
   links inside it. Browsers split nested links apart, leaving empty duplicate
   links. The title link is now stretched over the card instead, and the tag
   and author links sit above it so they stay clickable. */
.blog-index__post--linked {
  position: relative;
  isolation: isolate;
}

.blog-index__post--linked .blog-index__post-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.blog-index__post--linked .blog-index__post-tags,
.blog-index__post--linked .blog-index__post-author-name {
  position: relative;
  z-index: 2;
}

/* The bookmarks title was positioned so it sat above the video. That made it
   the containing block for the stretched link, so the video is layered behind
   the text instead. */
.blog-bookmarks-wrap .blog-index__post--linked h2.blog-index__post-title {
  position: static;
}

.blog-bookmarks-wrap .blog-index__post--linked .animation-thumbnail-blog {
  z-index: -1;
}

.blog-materials__link {
  display: block;
  border-radius: 6px;
}

/* The theme turns post links #05a9df on hover/focus; the card has its own
   hover, so the links keep their normal colour. */
.blog-index-div .blog-index__post-content a:hover,
.blog-index-div .blog-index__post-content a:active,
.blog-index-div .blog-index__post-content a:focus {
  color: #2d323e;
}

/* #9FA1A7 on #F2F4F6 is 2.34:1, below the 4.5:1 WCAG AA text minimum. */
.blog-index-div .blog-index__post-tag-link {
  color: #626670 !important;
}

.blog-index-div .blog-index__post-tag-link:hover {
  color: #2d323e !important;
}

.blog-index-div .blog-materials-wrap .blog-index__post-tag-link {
  color: #2d323e !important;
}

/* The theme removes every focus outline, so these are restored for keyboard
   users. The ring goes on the whole card when the stretched title link has
   focus. */
.blog-index-div .blog-index__post-link:focus-visible,
.blog-index-div .blog-index__post-tag-link:focus-visible,
.blog-index-div .blog-index__post-author-name:focus-visible {
  outline: 3px solid #153743;
  outline-offset: 2px;
}

@supports selector(:has(a)) {
  .blog-index__post--linked:has(.blog-index__post-link:focus-visible) {
    outline: 3px solid #153743;
    outline-offset: 3px;
  }

  .blog-index-div .blog-index__post--linked .blog-index__post-link:focus-visible {
    outline: none;
  }
}

/* Reduced-motion users get static cards: no hover zoom or transitions. The
   looping thumbnail videos are not started for them (see module.js). */
@media (prefers-reduced-motion: reduce) {
  .blog-index-div,
  .blog-index-div * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .blog-materials-wrap .blog-index__post:hover {
    transform: none;
  }
}