/* Product comparison section.

   The cards are the theme's own product-grid-item, rendered inside the theme's
   `grid grid--uniform`, so this file must not restyle the grid or the cards.
   Declaring display:grid here would break the theme's own grid system, and
   restyling the card would reintroduce the divergence this section had before,
   where its bespoke card sized each image box from that image's own aspect
   ratio and produced different photo heights in the same row.

   Scope: the section heading only.

   This file is served as a static .css asset, so it is NOT processed as Liquid.
   It previously set background-color from a Liquid section setting, written with
   double-brace interpolation, which shipped to the browser as that literal text
   and was discarded as an invalid declaration. Never put Liquid in here; rename
   the file to .css.liquid if a setting ever has to reach it. */

.product-comparison-section {
  width: 100%;
}

.product-comparison__header {
  text-align: center;
  margin-bottom: 60px;
}

.product-comparison__title {
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.product-comparison__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* Equal card heights.

   The card itself is the theme's and is not restyled. The only thing that made
   the cards uneven was the product title wrapping to a different number of
   lines: 1 line for "The Book of Psalms", 2 for "The Book of Matthew", 3 for
   "The Book of Genesis (Limited Edition)", which came out as 454px, 477px and
   500px tall in the same row.

   The theme grid is float-based (items float left inside a block container),
   so sibling heights cannot be equalised from the container without replacing
   its layout system. Reserving the title's tallest case is the change that
   costs least and is scoped to this section only.

   3 lines at the card title's line-height of 1.3. Raise this if a longer
   product title is ever added to the catalogue. */
.product-comparison__grid .grid-product__title {
  min-height: 3.9em;
}

@media only screen and (max-width: 768px) {
  .product-comparison__header {
    margin-bottom: 36px;
  }

  .product-comparison__title {
    font-size: 32px;
  }
}