/* =============================================
Block - Page Header
============================================= */
/* =============================================================================
Import me into 'individual' scss partials
============================================================================= */
/* =============================================================================
Functions
============================================================================= */
/* Deep-get sass map
=================================================== */
/* =============================================================================
Mixins
============================================================================= */
/* =================================================
Breakpoints
=================================================== */
/* =============================================================================
Breakpoint definition
============================================================================= */
/* =============================================================================
Config
============================================================================= */
.block-page-header__content {
  background: var(--colors-white);
  transition: background 0.5s ease;
}
body[data-theme=dark] .block-page-header__content {
  background: var(--colors-black);
  transition: background 0.5s ease;
}
.block-page-header .tsl-card {
  display: flex;
  flex-flow: row wrap;
  align-content: center;
  align-items: center;
  padding: calc(4 * var(--baseline));
}
@media all and (min-width: 768px) {
  .block-page-header .tsl-card {
    padding: calc(9 * var(--baseline));
  }
}
.block-page-header .tsl-card > * {
  flex: 1 1 100%;
}
.block-page-header__media {
  position: relative;
  padding-top: 100%;
}
.block-page-header__media img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.block-page-header__heading {
  margin-bottom: 0;
  text-transform: uppercase;
}
.block-page-header__heading.tsl-heading--primary {
  font-size: var(--font-size-xl);
}
.block-page-header__paragraph p {
  font-weight: 500;
  font-size: var(--font-size-md);
  text-align: center;
}