* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    font-size: var(--font-size-paragraph);
    color: var(--color-body);
}

body,
html body :where(.editor-styles-wrapper) {
    font-family: var(--font-family-secondary);
}

html body :where(.editor-styles-wrapper) h5 {
    margin:0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h7 {
    font-family: var(--font-family-primary);
    font-weight: bold;
    letter-spacing: 0;
}

.lesson-content h1,
h1 {
    font-size: var(--font-size-heading-1);
    line-height: var(--line-height-heading-1);
    letter-spacing: 0;
}

.lesson-content h2,
h2 {
    font-size: var(--font-size-heading-2);
    line-height: var(--line-height-heading-2);
    letter-spacing: 0;
}

.lesson-content h3,
h3 {
    font-size: var(--font-size-heading-3);
    line-height: var(--line-height-heading-3);
    letter-spacing: 0;
}

.lesson-content h4,
h4 {
    font-size: var(--font-size-heading-4);
    line-height: var(--line-height-heading-4);
    letter-spacing: 0;
}

.lesson-content h5,
h5 {
    font-size: var(--font-size-heading-5);
    line-height: var(--line-height-heading-5);
    text-transform: inherit;
    letter-spacing: 0;
}

.lesson-content h6,
h6 {
    font-size: var(--font-size-heading-6);
    line-height: var(--line-height-heading-6);
    text-transform: inherit;
    letter-spacing: 0;
}

.lesson-content .h7,
.h7 {
    font-size: var(--font-size-heading-7);
    line-height: var(--line-height-heading-7);
    text-transform: inherit;
    letter-spacing: 0;
}

.lesson-content p,
p {
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
}

.lesson-content p.paragraph-small,
p.paragraph-small {
    font-size: var(--font-size-paragraph-small);
    line-height: var(--line-height-paragraph-small);
}

.lesson-content .micro,
.micro {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

.band {
    background: var(--color-primary-tint-500);
    color: var(--color-body);
}

.band__portal {
    background: var(--color-danger-tint-500);
    color: var(--color-body);
}

.hidden {
    display: none;
}

.container {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
}

.cursor-default {
    cursor: default ! important;
}

.cursor-pointer {
    cursor: pointer;
}

.stretched-link::after {
    cursor: pointer;
}

.icon-link i,
.icon-link {
    color: var(--color-body);
    display: inline-block;
    text-decoration: none ! important;
    cursor: pointer;
}

.icon-link:hover i,
.icon-link:hover {
    color: var(--color-emphasis);
}

.icon-link {
    margin-left: 1rem;
}

/*
* Avatar
*/
.avatar__image {
    height: 45px;
    border-radius: 50px;
    cursor: pointer;
}

.avatar__container {
    display: inline-block;
    position: relative;
}

.avatar--large {
    .avatar {
        width: 46px;
        height: 46px;
        margin-top: 3px;
        border-radius: 100px;
    }
}

.avatar__dropdown.dropdown-menu {
    right: 0px;
    top: 50px;
}

.avatar__image-name {
    pointer-events: none;
    display: flex;
    align-content: center;
    align-items: center;
}

.avatar__wrapper .avatar__image:hover {
    background-color: var(--color-primary-tint-200);
}

.avatar__wrapper {
    position: relative;
}

.avatar__dropdown-item {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    width: auto;
    box-sizing: border-box;
    color: var(--color-body);
    border-radius: var(--border-radius-small);
    text-decoration: none ! important;
    cursor: pointer;
}

.avatar__dropdown-item :focus,
.avatar__dropdown-item:hover {
    color: var(--color-body);
    background: var(--color-tertiary-tint-10);

}

/*
*   Image
*/
.wp-block-image {
    margin:0;
}

body .wp-block-image :where(figcaption) {
    padding: 0 0 var(--padding-tiny) 0;
    margin:0;
}

figcaption {
    padding:0;
    margin:0;
    margin-bottom: var(--padding-tiny);
}

figure.wp-block-gallery.has-nested-images {
    display: flex;
    flex-wrap: wrap;
    gap: 0px var(--padding-small);
    margin: 0 auto var(--padding-large, 1.5rem);
}

figure.wp-block-gallery > figcaption {
  flex-basis: 100%;
}

body figure.wp-block-gallery.has-nested-images > figure.wp-block-image {
    flex-grow: 1;
    flex-basis: calc(50% - (var(--padding-small, 0.75rem) / 2));
    width: calc(50% - (var(--padding-small, 0.75rem) / 2));
    max-width: 100%;
}

body figure.wp-block-gallery.has-nested-images.columns-1 > figure.wp-block-image {
    flex-basis: 100%;
    width: 100%;
}

body figure.wp-block-gallery.has-nested-images.columns-3 > figure.wp-block-image {
    flex-basis: calc(33.33% - (var(--padding-small, 0.75rem) * 2 / 3));
    width: calc(33.33% - (var(--padding-small, 0.75rem) * 2 / 3));
}

body figure.wp-block-gallery.has-nested-images.columns-4 > figure.wp-block-image {
    flex-basis: calc(25% - (var(--padding-small, 0.75rem) * 3 / 4));
    width: calc(25% - (var(--padding-small, 0.75rem) * 3 / 4));
}

/* Bijschrift onder de foto, niet als gradient-overlay erop (reset van de
   core gallery-CSS in mx-cdn images.css). Zelfde opmaak als los wp-block-image. */
body figure.wp-block-gallery.has-nested-images figure.wp-block-image > figcaption {
    position: static;
    background: none;
    color: inherit;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0 0 var(--padding-tiny) 0;
    margin: 0;
    text-shadow: none;
}

/* Core zet een ::before met backdrop-filter + mask-image (schaduw achter
   het overlay-bijschrift). Bijschrift staat hier onder de foto, dus weg. */
body figure.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
    display: none;
}

/* Core (.is-cropped) zet op de img flex:1 0 0% + height:100%; met het
   bijschrift als tweede flex-item in de kolom klapt de img dan naar 0px.
   :not(#individual-image) alleen om boven core's ID-specificiteit te komen. */
body figure.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) a,
body figure.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
    flex: 0 0 auto;
    height: auto;
    width: 100%;
}

body figure.wp-block-image {
    margin:0;
    margin-bottom:var(--padding-large);
}

body figure.wp-block-gallery.has-nested-images .wp-block-image {
    margin-bottom:0;
}

body .wp-block-image img {
    max-width:100%;
}

.tools-image__small-preview > * {
    zoom:0.4;
}

.portfolio__unread-feedback {
    position: absolute;
    z-index: 1;
    top: -6px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #fff;
    background-color: var(--color-danger);
    font-size: 13px;
    border: 1px solid #333;
}

.embed-responsive-item,
.embed-responsive {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  margin-bottom: var(--margin-large);
}
.embed-responsive:before {
  display:block;
  content:""
}
.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  border:0
}
.embed-responsive-21by9:before {
  padding-top:42.85714286%
}
.embed-responsive-16by9:before {
  padding-top:56.25%
}
.embed-responsive-4by3:before {
  padding-top:75%
}
.embed-responsive-1by1:before {
  padding-top:100%
}