.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 
}

/* 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, which is 2.71:1 on white. */
.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: #0077a8;
}

/* #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;
  }
}