// main: style.less

.opaque-featured-image-container {
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0;

  .featured-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  .filter {
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
    background: @opaque_header_bg;
    background: var(--opaque_header_bg);

    &.less-opaque {
      background: @less_opaque_header_bg;
      background: var(--less_opaque_header_bg);
    }

    &.very-opaque {
      background: @very_opaque_header_bg;
      background: var(--very_opaque_header_bg);
    }
  }
}