:root {
    --font-name-din: 'FF DIN';
}

@font-face {
    font-family: var(--font-name-din);
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local(var(--font-name-din)), url('./Fonts/DIN/DINWebPro.woff');
}

@font-face {
    font-family: var(--font-name-din);
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(var(--font-name-din)), url('./Fonts/DIN/DINWebPro.woff');
}

@font-face {
    font-family: var(--font-name-din);
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(var(--font-name-din)), url('./Fonts/DIN/DINWebPro-Bold.woff');
}

.be-preview {
    --grid-img-width: 177px;
    --grid-img-height: 100px;
    --color-primary: #003E8A;
    --color-bg-gray: #EFEFEF;
    --border-color: #9D9D9E;
    --headline-color: var(--color-primary);
    --caption-color: #5C6266;
    --font-family-base: var(--font-name-din), 'Roboto', 'Babel Sans', 'Dosis', 'Ropa Sans', 'Open Sans', Arial, sans-serif;
    --letter-spacing-base: -.0275em;
    --letter-spacing-headline: -.02em;

    display: block;
    font-family: var(--font-family-base);
    letter-spacing: var(--letter-spacing-base);
}

.be-preview h1,
.be-preview h2,
.be-preview h3,
.be-preview h4,
.be-preview h5,
.be-preview h6,
.be-preview .h1,
.be-preview .h2,
.be-preview .h3,
.be-preview .h4,
.be-preview .h5,
.be-preview .h6 {
    margin-top: 0;
    font-weight: 700;
    color: var(--headline-color);
    letter-spacing: var(--letter-spacing-headline);
}

.be-preview .h-highlight {
    font-weight: 300;
    color: var(--headline-color);
    letter-spacing: var(--letter-spacing-headline);
}

.be-preview h1 a,
.be-preview h2 a,
.be-preview h3 a,
.be-preview h4 a,
.be-preview h5 a,
.be-preview h6 a,
.be-preview .h1 a,
.be-preview .h2 a,
.be-preview .h3 a,
.be-preview .h4 a,
.be-preview .h5 a,
.be-preview .h6 a {
    --bs-link-color: var(--headline-color);
}

.be-preview .subheader,
.be-preview .kicker {
    font-weight: 700;
    margin-bottom: .5em;
    color: var(--caption-color);
    letter-spacing: 0;
}

.be-preview .kicker {
    text-transform: uppercase;
}

.be-preview .no-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg-gray);
    width: var(--grid-img-width);
    height: var(--grid-img-height);
}

.be-preview .icon .icon-markup img {
    height: 100%;
    object-fit: contain;
}

.be-preview .img-grid {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(auto-fit, var(--grid-img-width));
    grid-template-rows: repeat(auto-fit, var(--grid-img-height));
}