/* Section 1 */
.c-blog-banner {
  background:var(--powder);
  padding-block:var(--space-l-xl);
}
.c-blog-banner__columns {
    align-items: flex-end;
    gap:var(--space-l-2xl);
}
.c-blog-banner__column--1 {
  flex-basis: calc( 50% - var(--space-l-2xl) );
}
.c-blog-banner__column--2 {
  flex-basis: calc( 50% - var(--space-l-2xl) );
  min-width: min(325px, 100%);
  max-width: 425px;
}

/* Section 2 */
.c-recent-posts {
    background:var(--white);
    padding-block:var(--space-l-2xl) var(--space-m);
    text-align: center;
}
.c-recent-posts__links {
    padding-block:var(--space-xs);
}
.c-recent-posts__list {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  padding:0;
  justify-content:center;
}
.c-recent-posts__list-item {
  display:flex;
  padding:var(--space-xs) var(--space-2xs);
  font-family: var(--poppins);
  font-weight: 900;
  line-height:1.1;
}
.c-recent-posts__list-item a {
  padding:0;
  text-decoration:none;
  color:currentColor;

  background-size: 0 5px;
  background-image: linear-gradient(180deg,currentColor 50%,transparent 0);
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: right;
  padding-top: 5px;
  padding-bottom: 5px;
  position: relative;
  line-height: 1;
  transition: background-size .3s;
}
.c-recent-posts__list-item:after {
  content:"";
  display:block;
  height:calc(100% + .5em);
  width:2px;
  margin-block:-.25em 0;
  margin-inline:var(--space-2xs) calc( var(--space-2xs) * -1 );
  background:var(--black);
}
.c-recent-posts__list-item:last-child:after {
  display:none
}

.c-recent-posts__list-item.selected {
  pointer-events: none;
}
.c-recent-posts__list-item.selected a {
  background-image: linear-gradient(180deg,currentColor 50%,transparent 0);
  background-size: 100% 5px;
  background-position-x: left;
  background-position-y: bottom;
}

#c-recent-posts__container {
  align-items: stretch;
}

#blog-category--loan-program-news {
  color:var(--corporategreen);
}
#blog-category--community {
  color:var(--fire);
}
#blog-category--home-buyer-guides {
  color:var(--medallion);
}
#blog-category--home-owner-guides {
  color:var(--frost);
}

@media (hover: hover) {
  .c-recent-posts__list-item a:hover {
    background-image: linear-gradient(180deg,currentColor 50%,transparent 0);
    background-size: 100% 5px;
    background-position-x: left;
    background-position-y: bottom;
  }
}

/* Search Bar */
#search-form {
  width:80%;
  gap:var(--space-m);
}
.c-search-form__label {
  position: relative;
  flex-grow:1;
}
.c-search-form__placeholder {
  position: absolute;
  top: 50%;
  left: .25em;
  width: 1.5em;
  height: 1.5em;
  transform: translateY(-50%);
}
.c-search-form__placeholder svg {
  width:100%;
  height:100%;
}
#search-input {
  padding-inline-start: 1.75em;
  background:#EEEDEE;
  border-radius:1.5em;
  width:100%;
  border-color:darkgrey;
  color:var(--black);
}

.o-search__input, .o-search__button {
  height:auto;
  min-height:50px;
}

@media screen and (max-width: 500px) {
  .c-recent-posts__list-item {
    flex-basis: 100%;
    justify-content: center;
  }
  .c-recent-posts__list-item::after {
    display: none;
  }

  .c-recent-posts__list-item a {
    background-image: linear-gradient(180deg,currentColor 50%,transparent 0);
    background-size: 100% 5px;
    background-position-x: left;
    background-position-y: bottom;
  }

  .c-recent-posts__list-item.selected {
    border:2px dotted currentColor;
  }

  #search-form {
    flex-wrap: wrap;
    justify-content: center;
  }

}