/* ==========================================================================
   UTILITIES (.u-*)
   Small, single-purpose, prefixed to avoid clashing with theme/plugin CSS.
   Responsive suffix `-md` applies from 768px up (below it, the rule is absent,
   so the element just flows normally). Add more breakpoints/utilities only
   when something actually needs them — don't pre-generate a matrix.
   ========================================================================== */

/* Pin an element to the bottom-centre of its nearest positioned ancestor.
   What "the bottom" is depends on that ancestor: a full-height parent → the
   viewport/section edge; a content-sized parent → just below its content.
   .u-bottom applies always; .u-bottom-md only from 768px up. Declarations are
   written once for both; below 768px the -md variant is reset back to flow. */
.u-bottom,
.u-bottom-md {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  text-align: center;
}

@media (max-width: 767.99px) {
  .u-bottom-md {
    position: static;
    transform: none;
  }
}