.vm-home-featured {
  display: grid;
  grid: auto-flow / repeat(auto-fit, minmax(225px, 1fr));
  row-gap: 8px;
  column-gap: 8px;
  margin-bottom: 3rem;
}

.vm-home-featured__large {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

.vm-home-featured-article:after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease-in-out;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%, transparent 100%);
  z-index: 3;
}

.vm-home-featured-article,
.vm-home-featured-thumbnail {
  position: relative;
  overflow: hidden;
}

.vm-home-featured-thumbnail {
  cursor: pointer;
}

.vm-home-featured-article:before {
  content: "";
  display: block;
  width: 1px;
  padding-top: 75%;
}

.vm-home-featured-article__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.vm-home-featured-article__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.vm-home-featured-thumbnail {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.vm-home-featured-thumbnail.is-active {
  box-shadow: inset 4px 0 0 var(--vm-color-primary);
}

.vm-home-featured-article__title .vmsubtitle {
  color: #fff !important;
  font-size: 12px;
  order: 0;
}
.vm-home-featured-article__title {
  color: #fff !important;
  font-size: 14px;
}

.vm-home-featured-article__title {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem 0.5rem;
  color: #fff !important;
  font-size: 14px;
  width: 100%;
  z-index: 5;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.vm-home-tags {
  display: grid;
  grid: auto-flow / repeat(6, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
  margin-bottom: 3rem;
}

.vm-home-tag {
  text-decoration: none;
  display: block;
  height: 100%;
}

.vm-home-tag:hover,
.vm-home-tag:active,
.vm-home-tag:focus {
  .vm-home-tag__article {
    border-color: var(--vm-color-primary);
  }
  .vm-home-tag__label {
    color: var(--vm-color-primary);
    opacity: 0.8;
  }
}

.vm-home-tag__article {
  height: 100%;
  border: 1px solid #dfdfdf;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.vm-home-tag__label {
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 0;
  transition: all 0.2s ease;
}

.vm-home-tag__icon {
  width: 120px;
  height: 80px;
  object-fit: contain;
  object-position: center;
  margin-bottom: 1rem;
}



@media all and (max-width: 1200px) {
  .vm-home-featured {
    grid: repeat(2, 1fr) / repeat(4, 1fr);
  }

  .vm-home-tags {
    grid: auto-flow / repeat(3, 1fr);
  }

  .vm-home-featured-article:nth-child(1) {
    grid-column: 2 span;
    grid-row: 2 span;
  }
}

@media all and (max-width: 990px) {
  .vm-home-featured {
    grid: repeat(2, 1fr) / repeat(3, 1fr);
  }

  .vm-home-featured-article:nth-child(1) {
    grid-column: 2 span;
    grid-row: 2 span;
  }
}

@media all and (max-width: 680px) {
  .vm-home-featured {
    grid: auto-flow / 1fr;
  }

  .vm-home-tags {
    grid: auto-flow / repeat(2, 1fr);
  }

  .vm-home-featured-article:nth-child(1) {
    grid-column: initial;
    grid-row: initial;
  }
}

.vm-home-main {
  display: grid;
  grid: 1fr / 3fr 1fr 1fr;
  row-gap: var(--vm-grid-gap);
  column-gap: var(--vm-grid-gap-2x);
  margin-bottom: 3rem;
}

.vm-home-main__posts {
}

.vm-home-main__sidebar,
.vm-home-main__banner {
}

@media all and (max-width: 1024px) {
  .vm-home-main {
    grid: auto-flow / 1fr;
  }
}

@media all and (max-width: 680px) {
  .vm-home-featured-article:before {
    padding-top: 50%;
  }

  .vm-home-featured .vm-home-featured-article:nth-child(3) ~ .vm-home-featured-article {
    display: none;
  }
}