Rails 5.2 Частичная колонка с фоновым изображением, отображаемым по-разному на странице

Question

У меня есть три разных места на странице, где отображается один и тот же фрагмент.Часть включает в себя загрузочную ситуацию col-sm-4 / col-sm-8, которая должна заставить изображение занимать треть страницы, а текст - 2/3.Однако в каждом случае частичное рендеринг выполняется по-разному:

Вот страница (которая blogs#index):

<header class="py-5 bg-image-full bg-image-stripe" style="background-image: url(<%= asset_path "drops-of-water-mask.jpg" %>);">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-lg-12">
        <h1 class="display-4 mt-5 mb-2">The Blog</h1>
        <p class="lead mb-5">Your Source for Qualified Knowledge (or Other Tagline)</p>
      </div>
    </div>
  </div>
</header>


<% if current_spree_user && current_spree_user.admin? %>
  <section class="admin container">
    <div class="row">
      <div class="col text-left pt-3">
        <h2>Draft Posts</h2>
        <% @blogs.each do |blog| %>
          <% if !blog.published %>
            <p class="my-1 py-0"><%= link_to blog.title, edit_blog_path(blog) %></p>
          <% end %>
        <% end %>
      </div> <!-- drafts col -->
      <div class="col text-right pt-3">
        <%= link_to "Create New Blog", new_blog_path, class: "btn btn-primary" %>
        <%= link_to "Blog Management", home_blogs_path, class: "btn btn-primary" %>
      </div> <!-- create new col -->
    </div> <!-- row -->
  </section>

  <hr>
<% end %>


<main class="container">

  <div class="row">

    <div class="col-12" id="big-feature">
      <% @big_feature.each do |blog| %>
        <%= render partial: "blogs/blog-card", locals: { blog: blog } %>
      <% end %> <!-- each do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="most-popular">
      <h2>Most Popular</h2>
      <% @most_popular.each do |blog| %>
        <%= render partial: "blogs/blog-card", locals: { blog: blog } %>
      <% end %> <!-- each blog do -->
    </div> <!-- col -->

    <div class="col-sm-6" id="featured">
      <h2>Featured</h2>
      <% @featured.each do |blog| %>
        <%= render partial: "blogs/blog-card", locals: { blog: blog } %>
      <% end %> <!-- each blog do -->
    </div> <!-- col -->

  </div> <!-- row -->

</main> <!-- page container -->

А вот частичное blogs/_blog-card:

<%= link_to blog_path(blog) do %>
  <div class="blog-title-box my-3">
    <div class="row">

      <div class="image background-image col-md-4"
        style="background-image: url('<%= blog.featured_image_url %>')">
      </div> <!-- image col -->

      <div class="text col-sm-8 px-4 py-3">
        <h3><%= blog.title %></h3>
        <% if blog.big_feature %><p><%= blog.teaser %></p><% end %>
        <p class="tags"><% blog.tag_list.each do |tag| %>
          <%= link_to tag, tagged_path(tag: tag) %>
        <% end %></p>
        <p class="author"> By <%= Spree::User.find(blog.spree_user_id).email %> on <%= blog.published_at.in_time_zone("America/Los_Angeles").strftime("%B %d, %Y") %></p>
      </div> <!-- text col -->

    </div> <!-- row -->
  </div> <!-- blog title box -->
<% end %> <!-- link to blog -->

Вот какой-нибудь соответствующий CSS:

.blog-title-box {
  box-shadow: 0 10px 20px rgba(183, 173, 153, 0.19), 0 6px 6px rgba(183, 173, 153, 0.23);
}

.blog-title-box:hover {
  box-shadow: 0 14px 28px rgba(183, 173, 153, 0.30), 0 10px 10px rgba(183, 173, 153, 0.22);
}

.blog-title-box .image {
  height: 300px;
}

#big-feature a:hover,
#most-popular a:hover,
#featured a:hover {
  text-decoration: none !important;
}

.blog-title-box .text p {
  color: black;
}

.blog-title-box .text p.author {
  color: $color-grey;
  font-style: oblique;
}

.background-image {
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  max-width: 100%;
}

Кто-нибудь может понять, почему только блог в разделе «Самые популярные» правильно отображает?