/* =============================================================================
Single Post (blog)
============================================================================= */
/* =============================================================================
Import me into 'individual' scss partials
============================================================================= */
/* =============================================================================
Functions
============================================================================= */
/* Deep-get sass map
=================================================== */
/* =============================================================================
Mixins
============================================================================= */
/* =================================================
Breakpoints
=================================================== */
/* =============================================================================
Breakpoint definition
============================================================================= */
/* =============================================================================
Config
============================================================================= */
.single {
  /* Body content
  =================================================== */
}
.single-post-header {
  margin-bottom: calc(6 * var(--baseline));
  background: var(--colors-brand-4);
}
@media all and (max-width: calc(768px - 1px)) {
  .single-post-header {
    padding: 0 !important;
  }
}
.single-course .single-post-header {
  background: var(--colors-gray1);
}
.single-post-header__meta span {
  font-weight: 600;
}
.single-post-header__content {
  background: var(--colors-white);
  transition: background 0.5s ease;
}
.single-post-header__content-badge {
  flex: 0 0 50px !important;
  padding: 4px calc(2 * var(--baseline));
  border-radius: 15px;
  background: var(--colors-gray1);
  color: var(--colors-white);
}
body[data-theme=dark] .single-post-header__content {
  background: var(--colors-black);
  transition: background 0.5s ease;
}
.single-post-header__content .tsl-heading {
  margin-bottom: calc(2 * var(--baseline));
}
.single-post-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) {
  .single-post-header .tsl-card {
    padding: calc(9 * var(--baseline));
  }
}
.single-post-header .tsl-card > * {
  flex: 1 1 100%;
}
.single-post-header__featured {
  position: relative;
  padding-top: 100%;
}
.single-post-header__featured img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.single-post-header__heading {
  margin-bottom: 0;
  color: var(--colors-brand-4);
  font-size: var(--font-size-lg);
  text-transform: uppercase;
}
.single-post-header__paragraph {
  margin-bottom: calc(4 * var(--baseline));
}
.single-post-header__paragraph,
.single-post-header__paragraph p {
  font-weight: 500;
  font-size: var(--font-size-md);
}
.single-post-header__meta {
  margin-bottom: calc(4 * var(--baseline));
  color: var(--colors-gray1);
}
.single-post-header__meta svg {
  position: relative;
  top: 5px;
  width: 20px;
  margin-right: calc(1 * var(--baseline));
}
.single-post__content {
  margin-bottom: calc(9 * var(--baseline));
}
.single-post__content img {
  margin: calc(6 * var(--baseline)) auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.25s ease;
}
.single-post__content img:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s ease;
}