@charset "UTF-8";
/*
=========================
=========================
Variables
=========================
=========================
*/
/* Variables related to the header and footer height */
/* ===============================
   font-themes - base
   =============================== */
@import "https://fonts.googleapis.com/css?family=Lora:400,700&display=swap";
@import "https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap";
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400&display=swap";
.layout--reflecting .griditem--title .reflecting-title {
  background-image: url(/assets/reflecting-title-lora.svg);
  padding-bottom: 22.15%;
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting .griditem--title .reflecting-title {
    background-image: url(/assets/reflecting-title-lora-vert.svg);
    padding-right: calc((100vh - (4em + 65px)) * 0.2215);
  }
}

/* ===============================
   font-themes - titles
   =============================== */
.title-main,
.title-secondary,
.title-supplementray,
.title-overlay {
  font-family: "Titillium Web", sans-serif;
}

/* ===============================
   colour-themes
   =============================== */
/* ===============================
   app base
   =============================== */
/*
=========================
=========================
Normalize
=========================
=========================
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
section,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `section`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*
=========================
=========================
Universal
=========================
=========================
*/
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: serif;
  font-family: "Lora", serif;
  font-size: 15px;
  line-height: 1.5;
  color: #282823;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 1200px) and (orientation: landscape) {
  body {
    font-size: 16px;
  }
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

img {
  display: block;
}

main {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: #F9F9F7;
  padding: 0;
  margin: 40px auto 0;
}
@media only screen and (min-width: 700px) and (min-height: 600px) {
  main {
    min-height: auto;
    height: calc(100vh - 65px);
    margin: 0 auto;
    top: 40px;
  }
}

@media only screen and (min-width: 700px) and (min-height: 600px) {
  main.fullpagejs {
    height: auto;
    top: auto;
  }
}

.section {
  width: 100%;
}

main a {
  font-weight: 700;
  color: #7EB928;
}
main a:hover, main a:focus, main a:active {
  color: #618f1f;
}

/*
=========================
=========================
Temp for dev only
=========================
=========================
*/
/*
main {
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 3px;
    border-style: solid;
    border-color: blue;
    opacity: 0.7;
    }
  }
*/
/*
=========================
=========================
Component library
=========================
=========================
*/
.component-library {
  height: auto !important;
  background-color: #fff !important;
  padding-top: 40px;
  padding-bottom: 25px;
}

.component {
  background-color: #eeeee8;
  padding: 0;
  border: 1px solid #ededed;
  margin: 1em;
}
@media screen and (min-width: 700px) {
  .component {
    margin: 2em;
  }
}

.component-title {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  margin: 0.5rem 1rem 0;
}

.component-detail {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 13px;
  opacity: 0.5;
  margin: 0 1rem;
}

.component-content {
  background-color: #F9F9F7;
  padding: 1em;
  border-top: 1px solid #ededed;
  margin-top: 0.5rem;
}

.component-code-toggle {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  display: block;
  background-color: #000;
  padding: 0.25rem 1rem 0.1rem;
}

.component-code-toggle span {
  display: inline-block;
}

.component-code-toggle span:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-top: 0.5em solid #fff;
  border-left: 0.5em solid #000;
  border-right: 0.5em solid #000;
  border-bottom: 0.25em solid #000;
  margin-left: 0.4em;
}

.component-code-toggle.closed span:after {
  border-top: 0.5em solid #fff;
  border-bottom: 0.15em solid #000;
}

.component-code-toggle.open span:after {
  border-top: 0 solid #000;
  border-bottom: 0.5em solid #fff;
}

.component-code pre.prettyprint {
  width: 100%;
  padding: 0 1rem;
  border: none;
  border-radius: 0;
  margin: 0;
}

.component-code pre.prettyprint.closed {
  height: 0;
}

.component-code pre.prettyprint.open {
  height: auto;
}

/*
=========================
=========================
Fullpage.js
=========================
=========================
*/
/*!
 * fullPage 2.9.5
 * https://github.com/alvarotrigo/fullPage.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
html.fp-enabled,
.fp-enabled body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.fp-section {
  position: relative;
  -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
  -moz-box-sizing: border-box; /* <=28 */
  box-sizing: border-box;
}

.fp-slide {
  float: left;
}

.fp-slide, .fp-slidesContainer {
  height: 100%;
  display: block;
}

.fp-slides {
  z-index: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
  transition: all 0.3s ease-out;
}

.fp-section.fp-table, .fp-slide.fp-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.fp-tableCell {
  display: table-cell;
  width: 100%;
  height: 100%;
}

.fp-slidesContainer {
  float: left;
  position: relative;
}

.fp-controlArrow {
  -webkit-user-select: none; /* webkit (safari, chrome) browsers */
  -moz-user-select: none; /* mozilla browsers */
  -khtml-user-select: none; /* webkit (konqueror) browsers */
  -ms-user-select: none; /* IE10+ */
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: 0;
  height: 0;
  border-style: solid;
  margin-top: -38px;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.fp-controlArrow.fp-prev {
  left: 15px;
  width: 0;
  border-width: 38.5px 34px 38.5px 0;
  border-color: transparent #fff transparent transparent;
}

.fp-controlArrow.fp-next {
  right: 15px;
  border-width: 38.5px 0 38.5px 34px;
  border-color: transparent transparent transparent #fff;
}

.fp-scrollable {
  overflow: hidden;
  position: relative;
}

.fp-scroller {
  overflow: hidden;
}

.iScrollIndicator {
  border: 0 !important;
}

.fp-notransition {
  -webkit-transition: none !important;
  transition: none !important;
}

#fp-nav {
  position: fixed;
  z-index: 100;
  margin-top: -32px;
  top: 50%;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
}

#fp-nav.right {
  right: 17px;
}

#fp-nav.left {
  left: 17px;
}

.fp-slidesNav {
  position: absolute;
  z-index: 4;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  left: 0 !important;
  right: 0;
  margin: 0 auto !important;
}

.fp-slidesNav.bottom {
  bottom: 17px;
}

.fp-slidesNav.top {
  top: 17px;
}

#fp-nav ul,
.fp-slidesNav ul {
  margin: 0;
  padding: 0;
}

#fp-nav ul li,
.fp-slidesNav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
}

.fp-slidesNav ul li {
  display: inline-block;
}

#fp-nav ul li a,
.fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #333;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0px 0px -5px;
}

#fp-nav ul li .fp-tooltip {
  position: absolute;
  top: -2px;
  color: #fff;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  display: block;
  opacity: 0;
  width: 0;
  cursor: pointer;
}

#fp-nav ul li:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip {
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  width: auto;
  opacity: 1;
}

#fp-nav ul li .fp-tooltip.right {
  right: 20px;
}

#fp-nav ul li .fp-tooltip.left {
  left: 20px;
}

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell {
  height: auto !important;
}

.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
  height: auto !important;
}

/*
=========================
=========================
Fullpage.js overrides
=========================
=========================
*/
@media screen and (max-width: 699px), screen and (max-height: 599px) {
  #fullpage .section,
  #fullpage .section .fp-tableCell {
    height: auto !important;
  }
}

#fp-nav.right {
  right: 2px;
}

/*
=========================
=========================
Components
=========================
=========================
*/
/*
=========================
Components
- text
=========================
*/
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}

.title-main {
  font-size: 2.5em;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 0.25em;
}

.title-secondary {
  font-size: 1.25em;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
}

.title-supplementray {
  font-size: 1em;
  line-height: 1.3;
  font-weight: 400;
  font-style: italic;
  opacity: 0.666;
  margin: 1.5em 0 0;
}

.title-overlay {
  font-size: 1.5em;
  line-height: 1.5;
  font-weight: 400;
  color: #fff;
  margin: 0;
}

.credit-overlay {
  font-size: 1em;
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  color: #fff;
  margin: 0.5em 0 0;
}

p.credit {
  margin: 0;
}

p.credit span {
  font-weight: 700;
}

.story-summary {
  font-size: 1.3em;
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
}

/*
=========================
Components
- images
=========================
*/
img {
  display: block;
}

div[class*=griditem] > img {
  max-width: 100%;
}
@media screen and (min-width: 700px) {
  div[class*=griditem] > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.griditem__cover-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
=========================
Components
- video
=========================
*/
.videoComponent {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.2%;
}

.videoComponent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

/*
=========================
Components
- panorama
=========================
*/
.panoramaComponent {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.2%;
}

.panoramaComponent iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

/*
=========================
Components
- audio
=========================
*/
.audioComponent {
  width: 100%;
}

.audioComponent audio {
  width: 100%;
}

/*
=========================
Components
- Sharing
=========================
*/
.sharing-icon {
  line-height: 1;
  display: block;
  width: 2.5em;
  margin: 0 0.5em;
}
.sharing-icon:first-child {
  margin-left: 0;
}
.sharing-icon:last-child {
  margin-right: 0;
}

.sharing-icon span {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sharing-icon img {
  display: inline-block;
  max-width: 100%;
}

/*
=========================
Components
- 9 sq collage
=========================
*/
.nineSqCollage {
  max-width: 100%;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 2px;
}

.nineSqCollage div img {
  max-width: 100%;
}

/* Based on https://codepen.io/ongtiffany/pen/BoOeQV?editors=0100 */
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  opacity: 0;
  overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  z-index: 2;
}

/* Styles the close link, adds the slide down transition */
a.lightbox-close,
a.lightbox-prev,
a.lightbox-next {
  display: block;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: -80px;
  z-index: 3;
}

.lightbox-target a:nth-of-type(1) {
  right: 0;
}

.lightbox-target a:nth-of-type(2) {
  right: 50px;
}

.lightbox-target a:nth-of-type(3) {
  right: 100px;
}

.lightbox-close-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.1);
}

/* Provides the "X" "<" ">" for navigation links */
a.lightbox-close:before,
a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top: 10px;
}

a.lightbox-close:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

a.lightbox-close:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

a.lightbox-prev:before,
a.lightbox-prev:after,
a.lightbox-next:before,
a.lightbox-next:after {
  content: "";
  display: block;
  height: 18px;
  width: 1px;
  background: black;
  position: absolute;
}

a.lightbox-prev:before,
a.lightbox-next:before {
  left: 26px;
  top: 11px;
}

a.lightbox-prev:after,
a.lightbox-next:after {
  left: 26px;
  top: 23px;
}

a.lightbox-prev:before,
a.lightbox-next:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

a.lightbox-prev:after,
a.lightbox-next:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
  opacity: 1;
  z-index: 2;
  top: 0;
  bottom: 0;
}

.lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
}

.lightbox-target:target a.lightbox-close,
.lightbox-target:target a.lightbox-prev,
.lightbox-target:target a.lightbox-next {
  top: 0px;
}

/*
=========================
=========================
Header & Footer
=========================
=========================
*/
.app-header,
.app-footer {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 13px;
  line-height: 1;
  width: 100%;
  background-color: #0d0d0d;
  color: #d1d0cb;
  text-rendering: optimizeLegibility;
}

.app-header {
  position: absolute;
  z-index: 100;
  top: 0px;
}
@media only screen and (min-width: 700px) and (min-height: 600px) {
  .app-header {
    position: fixed;
    overflow: visible;
    max-height: none;
  }
}

@media only screen and (min-width: 700px) and (min-height: 600px) {
  .app-footer {
    position: fixed;
    bottom: 0px;
  }
}

.app-header .inner,
.app-footer .inner {
  max-width: 1600px;
  margin: 0 auto;
}

.app-header .inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 40px auto;
}

.app-header .title,
.app-footer p {
  white-space: nowrap;
  padding: 6px;
  margin: 0;
}

.app-header .title {
  grid-column: 1/span 1;
}

.app-header .title img {
  height: 28px;
}

.app-header a,
.app-header label,
.app-footer a {
  color: #d1d0cb;
  text-decoration: none;
  transition: ease 0.2s background-color;
  padding: 6px;
}
.app-header a:hover, .app-header a:focus, .app-header a:active,
.app-header label:hover,
.app-header label:focus,
.app-header label:active,
.app-footer a:hover,
.app-footer a:focus,
.app-footer a:active {
  background-color: #333;
}

.app-header a,
.app-header label {
  display: block;
}

.app-footer a {
  display: inline-block;
}

.app-header #logo {
  padding: 0px;
  margin: 0px;
}

.app-header label.nav-toggle {
  text-align: right;
  grid-column: 2/span 1;
  align-self: center;
}
@media only screen and (min-width: 700px) and (min-height: 600px) {
  .app-header label.nav-toggle {
    display: none;
  }
}

.app-header label.nav-toggle + input {
  display: none;
}

.app-header .navlight {
  grid-column: 2/span 1;
  grid-row: 2/span 1;
  align-self: center;
  position: absolute;
  top: 40px;
  right: 0;
  background-color: #0d0d0d;
  max-height: 0;
  overflow: hidden;
}
@media only screen and (min-width: 700px) and (min-height: 600px) {
  .app-header .navlight {
    grid-row: 1/span 1;
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }
}

.app-header label.nav-toggle + input:checked ~ .navlight {
  max-height: none;
}

.app-header .navlight ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

@media only screen and (min-width: 700px) and (min-height: 600px) {
  .app-header .navlight > ul {
    display: flex;
  }
}

.app-header .navlight ul li {
  position: relative;
}

.app-header .navlight ul li ul {
  background-color: #0d0d0d;
  overflow: hidden;
}
@media only screen and (min-width: 700px) and (min-height: 600px) {
  .app-header .navlight ul li ul {
    position: absolute;
    top: 20px;
    z-index: 10;
    max-height: 0;
  }
}

.app-header .navlight ul li input[type=checkbox] {
  display: none;
}

@media only screen and (min-width: 700px) and (min-height: 600px) {
  .app-header .navlight ul li.withsub input[type=checkbox]:checked ~ ul {
    max-height: 20em;
  }
}

/*
.app-header .navlight ul li ul.open {
  @media only screen and (min-width: 700px) and  (min-height: 600px) {
    max-height: 20em;
    }
  }
*/
.app-header .navlight ul li ul li {
  padding: 0 0 0 6px;
}

.app-header .navlight li.current > a {
  color: #ff9943;
}

/*
=========================
FORMS
=========================
*/
.form-demo {
  height: auto;
  top: auto;
  padding-top: calc(40px + 1em);
  padding-bottom: calc(25px + 1em);
  padding-left: 1em;
  padding-right: 1em;
  margin: 0;
}

.form-demo-title {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  padding-bottom: 0.25em;
  border-bottom: 1px solid #ddd;
  margin: 3em 0 1em;
}

form fieldset {
  display: flex;
  flex-direction: column;
  gap: 30px;
  border: none;
  padding: 0;
}

.form-item {
  display: flex;
  gap: 10px;
}

.form-item__stacked {
  flex-direction: column;
}

label {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  display: block;
}

.form-item label {
  font-size: 1rem;
  line-height: 1.4;
  color: #282823;
  flex-basis: 8rem;
  flex-shrink: 0;
  padding: 0.5em 0.75rem;
  border: 1px solid transparent;
}

.form-item__natural-width label {
  flex-basis: auto;
  padding: 0.5em 0;
}

.form-item__stacked label {
  flex-basis: auto;
  padding: 0 0.75rem;
}

textarea {
  font-family: "Source Sans Pro", sans-serif;
  resize: vertical;
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
input[type=date],
textarea {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #282823;
  flex-grow: 1;
  padding: 0.5em 0.75em;
  border: none;
  outline: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #bbb;
  -webkit-appearance: none;
  transition: box-shadow ease 0.2s;
}
input[type=email]:hover, input[type=email]:active,
input[type=number]:hover,
input[type=number]:active,
input[type=password]:hover,
input[type=password]:active,
input[type=search]:hover,
input[type=search]:active,
input[type=tel]:hover,
input[type=tel]:active,
input[type=text]:hover,
input[type=text]:active,
input[type=url]:hover,
input[type=url]:active,
input[type=date]:hover,
input[type=date]:active,
textarea:hover,
textarea:active {
  box-shadow: 0 0 0 4px #ddecc7, inset 0 0 0 1px #618f1f;
}
input[type=email]:focus-visible, input[type=email]:focus,
input[type=number]:focus-visible,
input[type=number]:focus,
input[type=password]:focus-visible,
input[type=password]:focus,
input[type=search]:focus-visible,
input[type=search]:focus,
input[type=tel]:focus-visible,
input[type=tel]:focus,
input[type=text]:focus-visible,
input[type=text]:focus,
input[type=url]:focus-visible,
input[type=url]:focus,
input[type=date]:focus-visible,
input[type=date]:focus,
textarea:focus-visible,
textarea:focus {
  box-shadow: 0 0 0 1px #618f1f, inset 0 0 0 1px #618f1f;
}

.form-item__natural-width input[type=email],
.form-item__natural-width input[type=number],
.form-item__natural-width input[type=password],
.form-item__natural-width input[type=search],
.form-item__natural-width input[type=tel],
.form-item__natural-width input[type=text],
.form-item__natural-width input[type=url],
.form-item__natural-width input[type=date],
.form-item__natural-width textarea {
  flex-grow: 0;
}

/*	========================================================================== */
/*    	FORMS : FILE UPLOAD
/*	========================================================================== */
.form-file-upload {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: #282823;
  background-color: #fff;
  width: 100%;
  padding: 2em;
  border: none;
  outline: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px #bbb;
  -webkit-appearance: none;
  transition: box-shadow ease 0.2s;
}
.form-file-upload:hover, .form-file-upload:active {
  box-shadow: 0 0 0 4px #ddecc7, inset 0 0 0 1px #618f1f;
}
.form-file-upload:focus-visible, .form-file-upload:focus {
  box-shadow: 0 0 0 1px #618f1f, inset 0 0 0 1px #618f1f;
}

/*	========================================================================== */
/*    	FORMS : CHECKBOXES AND RADIOS
/*	========================================================================== */
.form-checkbox-label,
.form-radio-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: 0.5em 0 0;
  margin-bottom: 0;
}

.form-item__stacked form-checkbox-label,
.form-item__stacked .form-radio-label {
  flex-basis: auto;
  padding: 0.25em 0.75rem;
}

.form-checkbox-label span,
.form-radio-label span {
  line-height: 1.2;
  display: block;
  margin-top: 1px;
}

/* -- checkbox and radio styling based on https://codepen.io/jensimmons/pen/KKPzxJa */
@supports (-webkit-appearance: none) {
  input[type=checkbox],
  input[type=radio] {
    -webkit-appearance: none;
    position: relative;
    width: 22px;
    height: 22px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: #fff;
    border: none;
    outline: none;
    margin: 0;
    box-shadow: inset 0 0 0 1px #bbb;
    transition: box-shadow ease 0.3s;
  }
  input[type=checkbox] {
    border-radius: 6px;
  }
  input[type=radio] {
    border-radius: 50%;
  }
  label:hover input[type=checkbox],
  label:hover input[type=radio] {
    box-shadow: 0 0 0 4px #ddecc7, inset 0 0 0 1px #618f1f;
  }
  input[type=checkbox]:focus-visible,
  input[type=radio]:focus-visible {
    box-shadow: 0 0 0 1px #618f1f, inset 0 0 0 1px #618f1f;
  }
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    background-color: #618f1f;
    box-shadow: inset 0 0 0 1px #618f1f;
  }
  label:hover input[type=checkbox]:checked,
  label:hover input[type=radio]:checked {
    box-shadow: 0 0 0 4px #ddecc7, inset 0 0 0 1px #618f1f;
  }
  input[type=checkbox]:checked::after,
  input[type=radio]:checked::after {
    content: "";
    display: block;
    position: absolute;
  }
  input[type=checkbox]:checked::after {
    top: 7px;
    left: 5px;
    width: calc(22px - 10px);
    height: calc(22px - 16px);
    border: 3px solid #fff;
    border-right: none;
    border-top: none;
    transform: rotate(-45deg);
  }
  input[type=radio]:checked::after {
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
  }
}
/*	========================================================================== */
/*    	FORMS : SELECT
/*	========================================================================== */
/* select styling based on https://www.filamentgroup.com/lab/select-css.html */
select {
  font-family: "Source Sans Pro", sans-serif;
  display: block;
  font-size: 1rem;
  color: #282823;
  line-height: 1.2;
  padding: 0.25em 0.5em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 6px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: inset 0 0 0 1px #bbb;
  background-color: #fff;
  background-image: url("../img/caret-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.7em top 50%;
  background-size: 0.666em 0.666em;
  outline: none;
  transition: box-shadow ease 0.2s;
}
select:hover, select:active {
  box-shadow: 0 0 0 4px #ddecc7, inset 0 0 0 1px #618f1f;
}
select:focus-visible, select:focus {
  box-shadow: 0 0 0 1px #618f1f, inset 0 0 0 1px #618f1f;
}

select::-ms-expand {
  display: none;
}

select option {
  font-weight: normal;
}

/* Disabled styles */
select:disabled,
select[aria-disabled=true] {
  color: graytext;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.8) 100%), url("../img/caret-down.svg");
}

select:disabled:hover,
select[aria-disabled=true] {
  box-shadow: inset 0 0 0 1px #bbb;
}

/*
=========================
 BUTTON
=========================
*/
button.button,
input.button,
a.button,
label.button {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  font-size: rem;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: #fff;
  display: inline-block;
  background-color: #282823;
  background-image: none;
  border-radius: 6px;
  border: 1px solid #282823;
  outline-width: 2px;
  outline-offset: 2px;
  outline-style: solid;
  outline-color: transparent;
  padding: 0.5em 1em 0.6em;
  transition: all 0.2s ease-in-out;
}
button.button:hover, button.button:active,
input.button:hover,
input.button:active,
a.button:hover,
a.button:active,
label.button:hover,
label.button:active {
  background-color: #7EB928;
  border-color: #7EB928;
}
button.button:focus, button.button:focus-visible,
input.button:focus,
input.button:focus-visible,
a.button:focus,
a.button:focus-visible,
label.button:focus,
label.button:focus-visible {
  outline-color: #568f00;
}

button.button__secondary,
input.button__secondary,
a.button__secondary {
  color: #282823;
  background-color: #fff;
  border-color: #ccc;
}
button.button__secondary:hover, button.button__secondary:focus, button.button__secondary:active,
input.button__secondary:hover,
input.button__secondary:focus,
input.button__secondary:active,
a.button__secondary:hover,
a.button__secondary:focus,
a.button__secondary:active {
  color: #fff;
  background-color: #7EB928;
  border-color: #7EB928;
}
button.button__secondary:focus, button.button__secondary:focus-visible,
input.button__secondary:focus,
input.button__secondary:focus-visible,
a.button__secondary:focus,
a.button__secondary:focus-visible {
  outline-color: #568f00;
}

/* ===============================
   for lightgallery.js
   =============================== */
@font-face {
  font-family: "lg";
  src: url("../fonts/lg.eot?n1z373");
  src: url("../fonts/lg.eot?#iefixn1z373") format("embedded-opentype"), url("../fonts/lg.woff?n1z373") format("woff"), url("../fonts/lg.ttf?n1z373") format("truetype"), url("../fonts/lg.svg?n1z373#lg") format("svg");
  font-weight: normal;
  font-style: normal;
}
.lg-icon {
  font-family: "lg";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lg-actions .lg-next, .lg-actions .lg-prev {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 2px;
  color: #999;
  cursor: pointer;
  display: block;
  font-size: 22px;
  margin-top: -10px;
  padding: 8px 10px 9px;
  position: absolute;
  top: 50%;
  z-index: 1080;
}

.lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.lg-actions .lg-next:hover, .lg-actions .lg-prev:hover {
  color: #FFF;
}

.lg-actions .lg-next {
  right: 20px;
}

.lg-actions .lg-next:before {
  content: "\e095";
}

.lg-actions .lg-prev {
  left: 20px;
}

.lg-actions .lg-prev:after {
  content: "\e094";
}

@-webkit-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-ms-keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-right-end {
  0% {
    left: 0;
  }
  50% {
    left: -30px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@-ms-keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
@keyframes lg-left-end {
  0% {
    left: 0;
  }
  50% {
    left: 30px;
  }
  100% {
    left: 0;
  }
}
.lg-outer.lg-right-end .lg-object {
  -webkit-animation: lg-right-end 0.3s;
  -o-animation: lg-right-end 0.3s;
  animation: lg-right-end 0.3s;
  position: relative;
}

.lg-outer.lg-left-end .lg-object {
  -webkit-animation: lg-left-end 0.3s;
  -o-animation: lg-left-end 0.3s;
  animation: lg-left-end 0.3s;
  position: relative;
}

.lg-toolbar {
  z-index: 1082;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.45);
}

.lg-toolbar .lg-icon {
  color: #999;
  cursor: pointer;
  float: right;
  font-size: 24px;
  height: 47px;
  line-height: 27px;
  padding: 10px 0;
  text-align: center;
  width: 50px;
  text-decoration: none !important;
  outline: medium none;
  -webkit-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
  transition: color 0.2s linear;
}

.lg-toolbar .lg-icon:hover {
  color: #FFF;
}

.lg-toolbar .lg-close:after {
  content: "\e070";
}

.lg-toolbar .lg-download:after {
  content: "\e0f2";
}

.lg-sub-html {
  background-color: rgba(0, 0, 0, 0.45);
  bottom: 0;
  color: #EEE;
  font-size: 16px;
  left: 0;
  padding: 10px 40px;
  position: fixed;
  right: 0;
  text-align: center;
  z-index: 1080;
}

.lg-sub-html h4 {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
}

.lg-sub-html p {
  font-size: 12px;
  margin: 5px 0 0;
}

#lg-counter {
  color: #999;
  display: inline-block;
  font-size: 16px;
  padding-left: 20px;
  padding-top: 12px;
  vertical-align: middle;
}

.lg-toolbar, .lg-prev, .lg-next {
  opacity: 1;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
  -moz-transition: -moz-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
  -o-transition: -o-transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
  transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
}

.lg-hide-items .lg-prev {
  opacity: 0;
  -webkit-transform: translate3d(-10px, 0, 0);
  transform: translate3d(-10px, 0, 0);
}

.lg-hide-items .lg-next {
  opacity: 0;
  -webkit-transform: translate3d(10px, 0, 0);
  transform: translate3d(10px, 0, 0);
}

.lg-hide-items .lg-toolbar {
  opacity: 0;
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
  opacity: 0;
  -webkit-transition: -webkit-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  -moz-transition: -moz-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  -o-transition: -o-transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  opacity: 1;
}

.lg-outer .lg-thumb-outer {
  background-color: #0D0A0A;
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 1080;
  max-height: 350px;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  -webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  -moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  -o-transition: -o-transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s;
}

.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb {
  -webkit-transition-duration: 0s !important;
  transition-duration: 0s !important;
}

.lg-outer.lg-thumb-open .lg-thumb-outer {
  -webkit-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0);
}

.lg-outer .lg-thumb {
  padding: 10px 0;
  height: 100%;
  margin-bottom: -5px;
}

.lg-outer .lg-thumb-item {
  border-radius: 5px;
  cursor: pointer;
  float: left;
  overflow: hidden;
  height: 100%;
  border: 2px solid #FFF;
  border-radius: 4px;
  margin-bottom: 5px;
}

@media (min-width: 1025px) {
  .lg-outer .lg-thumb-item {
    -webkit-transition: border-color 0.25s ease;
    -o-transition: border-color 0.25s ease;
    transition: border-color 0.25s ease;
  }
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: #a90707;
}

.lg-outer .lg-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-outer.lg-has-thumb .lg-item {
  padding-bottom: 120px;
}

.lg-outer.lg-can-toggle .lg-item {
  padding-bottom: 0;
}

.lg-outer.lg-pull-caption-up .lg-sub-html {
  -webkit-transition: bottom 0.25s ease;
  -o-transition: bottom 0.25s ease;
  transition: bottom 0.25s ease;
}

.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
  bottom: 100px;
}

.lg-outer .lg-toggle-thumb {
  background-color: #0D0A0A;
  border-radius: 2px 2px 0 0;
  color: #999;
  cursor: pointer;
  font-size: 24px;
  height: 39px;
  line-height: 27px;
  padding: 5px 0;
  position: absolute;
  right: 20px;
  text-align: center;
  top: -39px;
  width: 50px;
}

.lg-outer .lg-toggle-thumb:after {
  content: "\e1ff";
}

.lg-outer .lg-toggle-thumb:hover {
  color: #FFF;
}

.lg-outer .lg-video-cont {
  display: inline-block;
  vertical-align: middle;
  max-width: 1140px;
  max-height: 100%;
  width: 100%;
  padding: 0 5px;
}

.lg-outer .lg-video {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  position: relative;
}

.lg-outer .lg-video .lg-object {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.lg-outer .lg-video .lg-video-play {
  width: 84px;
  height: 59px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -42px;
  margin-top: -30px;
  z-index: 1080;
  cursor: pointer;
}

.lg-outer .lg-has-vimeo .lg-video-play {
  background: url("../img/vimeo-play.png") no-repeat scroll 0 0 transparent;
}

.lg-outer .lg-has-vimeo:hover .lg-video-play {
  background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent;
}

.lg-outer .lg-has-html5 .lg-video-play {
  background: transparent url("../img/video-play.png") no-repeat scroll 0 0;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  width: 64px;
  opacity: 0.8;
}

.lg-outer .lg-has-html5:hover .lg-video-play {
  opacity: 1;
}

.lg-outer .lg-has-youtube .lg-video-play {
  background: url("../img/youtube-play.png") no-repeat scroll 0 0 transparent;
}

.lg-outer .lg-has-youtube:hover .lg-video-play {
  background: url("../img/youtube-play.png") no-repeat scroll 0 -60px transparent;
}

.lg-outer .lg-video-object {
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}

.lg-outer .lg-has-video .lg-video-object {
  visibility: hidden;
}

.lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play {
  display: none;
}

.lg-outer .lg-has-video.lg-video-playing .lg-video-object {
  visibility: visible;
}

.lg-progress-bar {
  background-color: #333;
  height: 5px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1083;
  opacity: 0;
  -webkit-transition: opacity 0.08s ease 0s;
  -moz-transition: opacity 0.08s ease 0s;
  -o-transition: opacity 0.08s ease 0s;
  transition: opacity 0.08s ease 0s;
}

.lg-progress-bar .lg-progress {
  background-color: #a90707;
  height: 5px;
  width: 0;
}

.lg-progress-bar.lg-start .lg-progress {
  width: 100%;
}

.lg-show-autoplay .lg-progress-bar {
  opacity: 1;
}

.lg-autoplay-button:after {
  content: "\e01d";
}

.lg-show-autoplay .lg-autoplay-button:after {
  content: "\e01a";
}

.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image {
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
}

.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
}

.lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  -webkit-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  -moz-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  -o-transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
  transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
}

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  -moz-transition: -moz-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  -o-transition: -o-transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

#lg-zoom-in:after {
  content: "\e311";
}

#lg-actual-size {
  font-size: 20px;
}

#lg-actual-size:after {
  content: "\e033";
}

#lg-zoom-out {
  opacity: 0.5;
  pointer-events: none;
}

#lg-zoom-out:after {
  content: "\e312";
}

.lg-zoomed #lg-zoom-out {
  opacity: 1;
  pointer-events: auto;
}

.lg-outer .lg-pager-outer {
  bottom: 60px;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  z-index: 1080;
  height: 10px;
}

.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont {
  overflow: visible;
}

.lg-outer .lg-pager-cont {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  margin: 0 5px;
}

.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.lg-outer .lg-pager-cont.lg-pager-active .lg-pager {
  box-shadow: 0 0 0 2px white inset;
}

.lg-outer .lg-pager-thumb-cont {
  background-color: #fff;
  color: #FFF;
  bottom: 100%;
  height: 83px;
  left: 0;
  margin-bottom: 20px;
  margin-left: -60px;
  opacity: 0;
  padding: 5px;
  position: absolute;
  width: 120px;
  border-radius: 3px;
  -webkit-transition: opacity 0.15s ease 0s, -webkit-transform 0.15s ease 0s;
  -moz-transition: opacity 0.15s ease 0s, -moz-transform 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s, -o-transform 0.15s ease 0s;
  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
}

.lg-outer .lg-pager-thumb-cont img {
  width: 100%;
  height: 100%;
}

.lg-outer .lg-pager {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset;
  display: block;
  height: 12px;
  -webkit-transition: box-shadow 0.3s ease 0s;
  -o-transition: box-shadow 0.3s ease 0s;
  transition: box-shadow 0.3s ease 0s;
  width: 12px;
}

.lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus {
  box-shadow: 0 0 0 8px white inset;
}

.lg-outer .lg-caret {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px dashed;
  bottom: -10px;
  display: inline-block;
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  vertical-align: middle;
  width: 0;
}

.lg-fullscreen:after {
  content: "\e20c";
}

.lg-fullscreen-on .lg-fullscreen:after {
  content: "\e20d";
}

.lg-outer #lg-dropdown-overlay {
  background-color: rgba(0, 0, 0, 0.25);
  bottom: 0;
  cursor: default;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1081;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
  -o-transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
  transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s;
}

.lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -moz-transform: translate3d(0, 0px, 0);
  -o-transform: translate3d(0, 0px, 0);
  -ms-transform: translate3d(0, 0px, 0);
  -webkit-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
  opacity: 1;
  visibility: visible;
}

.lg-outer.lg-dropdown-active #lg-share {
  color: #FFF;
}

.lg-outer .lg-dropdown {
  background-color: #fff;
  border-radius: 2px;
  font-size: 14px;
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  right: 0;
  text-align: left;
  top: 50px;
  opacity: 0;
  visibility: hidden;
  -moz-transform: translate3d(0, 5px, 0);
  -o-transform: translate3d(0, 5px, 0);
  -ms-transform: translate3d(0, 5px, 0);
  -webkit-transform: translate3d(0, 5px, 0);
  transform: translate3d(0, 5px, 0);
  -webkit-transition: -webkit-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  -moz-transition: -moz-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  -o-transition: -o-transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
  transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s;
}

.lg-outer .lg-dropdown:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  border: 8px solid transparent;
  border-bottom-color: #FFF;
  right: 16px;
  top: -16px;
}

.lg-outer .lg-dropdown > li:last-child {
  margin-bottom: 0px;
}

.lg-outer .lg-dropdown > li:hover a, .lg-outer .lg-dropdown > li:hover .lg-icon {
  color: #333;
}

.lg-outer .lg-dropdown a {
  color: #333;
  display: block;
  white-space: pre;
  padding: 4px 12px;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

.lg-outer .lg-dropdown a:hover {
  background-color: rgba(0, 0, 0, 0.07);
}

.lg-outer .lg-dropdown .lg-dropdown-text {
  display: inline-block;
  line-height: 1;
  margin-top: -3px;
  vertical-align: middle;
}

.lg-outer .lg-dropdown .lg-icon {
  color: #333;
  display: inline-block;
  float: none;
  font-size: 20px;
  height: auto;
  line-height: 1;
  margin-right: 8px;
  padding: 0;
  vertical-align: middle;
  width: auto;
}

.lg-outer #lg-share {
  position: relative;
}

.lg-outer #lg-share:after {
  content: "\e80d";
}

.lg-outer #lg-share-facebook .lg-icon {
  color: #3b5998;
}

.lg-outer #lg-share-facebook .lg-icon:after {
  content: "\e901";
}

.lg-outer #lg-share-twitter .lg-icon {
  color: #00aced;
}

.lg-outer #lg-share-twitter .lg-icon:after {
  content: "\e904";
}

.lg-outer #lg-share-googleplus .lg-icon {
  color: #dd4b39;
}

.lg-outer #lg-share-googleplus .lg-icon:after {
  content: "\e902";
}

.lg-outer #lg-share-pinterest .lg-icon {
  color: #cb2027;
}

.lg-outer #lg-share-pinterest .lg-icon:after {
  content: "\e903";
}

.group {
  *zoom: 1;
}

.group:before, .group:after {
  display: table;
  content: "";
  line-height: 0;
}

.group:after {
  clear: both;
}

.lg-outer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s;
  transition: opacity 0.15s ease 0s;
}

.lg-outer * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.lg-outer.lg-visible {
  opacity: 1;
}

.lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current {
  -webkit-transition-duration: inherit !important;
  transition-duration: inherit !important;
  -webkit-transition-timing-function: inherit !important;
  transition-timing-function: inherit !important;
}

.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current {
  -webkit-transition-duration: 0s !important;
  transition-duration: 0s !important;
  opacity: 1;
}

.lg-outer.lg-grab img.lg-object {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: -o-grab;
  cursor: -ms-grab;
  cursor: grab;
}

.lg-outer.lg-grabbing img.lg-object {
  cursor: move;
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: -o-grabbing;
  cursor: -ms-grabbing;
  cursor: grabbing;
}

.lg-outer .lg {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  max-height: 100%;
}

.lg-outer .lg-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
}

.lg-outer .lg-item {
  background: url("../img/loading.gif") no-repeat scroll center center transparent;
  display: none !important;
}

.lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide {
  display: inline-block !important;
}

.lg-outer.lg-css .lg-current {
  display: inline-block !important;
}

.lg-outer .lg-item, .lg-outer .lg-img-wrap {
  display: inline-block;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}

.lg-outer .lg-img-wrap {
  position: absolute;
  padding: 0 5px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.lg-outer .lg-item.lg-complete {
  background-image: none;
}

.lg-outer .lg-item.lg-current {
  z-index: 1060;
}

.lg-outer .lg-image {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
}

.lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play {
  opacity: 0;
  -webkit-transition: opacity 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s;
  transition: opacity 0.15s ease 0s;
}

.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play {
  opacity: 1;
}

.lg-outer .lg-empty-html {
  display: none;
}

.lg-outer.lg-hide-download #lg-download {
  display: none;
}

.lg-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background-color: #000;
  opacity: 0;
  -webkit-transition: opacity 0.15s ease 0s;
  -o-transition: opacity 0.15s ease 0s;
  transition: opacity 0.15s ease 0s;
}

.lg-backdrop.in {
  opacity: 1;
}

.lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current {
  -webkit-transition: none 0s ease 0s !important;
  -moz-transition: none 0s ease 0s !important;
  -o-transition: none 0s ease 0s !important;
  transition: none 0s ease 0s !important;
}

.lg-css3.lg-use-css3 .lg-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lg-css3.lg-use-left .lg-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.lg-css3.lg-fade .lg-item {
  opacity: 0;
}

.lg-css3.lg-fade .lg-item.lg-current {
  opacity: 1;
}

.lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current {
  -webkit-transition: opacity 0.1s ease 0s;
  -moz-transition: opacity 0.1s ease 0s;
  -o-transition: opacity 0.1s ease 0s;
  transition: opacity 0.1s ease 0s;
}

.lg-css3.lg-slide.lg-use-css3 .lg-item {
  opacity: 0;
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current {
  -webkit-transition: -webkit-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -moz-transition: -moz-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -o-transition: -o-transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}

.lg-css3.lg-slide.lg-use-left .lg-item {
  opacity: 0;
  position: absolute;
  left: 0;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide {
  left: -100%;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide {
  left: 100%;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  left: 0;
  opacity: 1;
}

.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current {
  -webkit-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -moz-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  -o-transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
  transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s;
}

/* ===============================
   for new create new page - more card like
   =============================== */
/*
=========================
Create layout
=========================
*/
main.create {
  background-color: #F9F9F7;
}
@media only screen and (min-width: 700px) and (min-height: 600px) {
  main.create {
    height: auto;
    top: auto;
  }
}

.create article {
  width: 100%;
  background-color: #F9F9F7;
  margin-top: 40px;
  margin-bottom: 25px;
  padding: 1em;
}

.create-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100vw - 2em), 1fr));
  align-items: stretch;
  gap: 3em;
  padding: 0;
  margin: 2em auto;
}

.create-cards li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.create-cards li a {
  text-decoration: none;
  color: #282823;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5em;
}

.create-cards li a p {
  font-size: 1.25em;
  margin: 0;
}

.create-cards li a img {
  display: block;
  max-width: 100%;
  background-color: #fff;
}

.create-cards li a:hover img,
.create-cards li a:focus img {
  box-shadow: 0 0 0 5px #7EB928;
}

/* ===============================
   for article page
   =============================== */
/*
=========================
Articles layout
- Grid Layout master rules
=========================
*/
.article section:nth-child(odd) {
  background-color: #F9F9F7;
}

.article section:nth-child(even) {
  background-color: #FFFFFF;
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  .article section div[class*=layout] {
    margin-top: 40px;
  }
}

.article#nofullpage {
  margin: 0 0 25px 0;
}

.article#nofullpage section,
.article#fullpage section > div > div {
  min-height: calc(100vh - 65px);
}

.article#nofullpage section:first-child,
.article#fullpage section:first-child > div > div {
  min-height: calc(100vh - 40px);
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .article#nofullpage section:first-child,
  .article#fullpage section:first-child > div > div {
    min-height: auto;
    height: calc(100vh - 65px);
  }
}

.article#nofullpage section:last-child,
.article#fullpage section:last-child > div > div {
  min-height: calc(100vh - 25px);
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .article#nofullpage section:last-child,
  .article#fullpage section:last-child > div > div {
    min-height: auto;
    height: calc(100vh - 65px);
  }
}

.article#nofullpage section:first-child:last-child,
.article#fullpage section:first-child:last-child > div > div {
  min-height: calc(100vh - 65px);
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .article#nofullpage section:first-child:last-child,
  .article#fullpage section:first-child:last-child > div > div {
    min-height: auto;
    height: calc(100vh - 65px);
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  .article#nofullpage section div[class*=layout] {
    margin-top: 0;
  }
}

/*
=========================
=========================
Temp for dev only
=========================
=========================
*/
/*
div[class*="layout"]  {
  position: relative;
  &:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 3px;
    border-style: solid;
    opacity: 0.3;
    }
  }

section:nth-child(odd) div[class*="layout"]:after {
  border-color: red;
  }

section:nth-child(even) div[class*="layout"]:after {
  border-color: green;
  }
*/
/*
=========================
Articles layout
- LAYOUT A
=========================
*/
.layout--a {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-template-rows: repeat(5, auto);
  grid-gap: 1em;
  width: 100%;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--a {
    height: calc(100vh - 65px);
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-template-rows: 1em auto 1fr 1em;
  }
}

.layout--a .griditem__1 {
  grid-column: 1/span 8;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--a .griditem__1 {
    grid-column: 1/span 14;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .layout--a .griditem__1 {
    grid-row: 1/span 4;
  }
}

.layout--a .griditem__1 div {
  width: 100vw;
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .layout--a .griditem__1 div {
    height: calc(100vh - 65px);
  }
}

@media screen and (min-width: 700px) and (orientation: landscape) {
  article section:first-child .layout--a .griditem__1 div,
  article section:last-child .layout--a .griditem__1 div {
    height: calc(100vh - 65px);
  }
}

@media screen and (min-width: 700px) and (orientation: landscape) {
  article section:first-child:last-child .layout--a .griditem__1 div {
    height: calc(100vh - 65px);
  }
}

.layout--a .griditem__1 div img {
  object-fit: cover;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}

.layout--a .griditem__2 {
  grid-column: 2/span 6;
  margin-bottom: 1em;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--a .griditem__2 {
    grid-column: 2/span 12;
    grid-row: 2/span 1;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .layout--a .griditem__2 {
    grid-column: 2/span 4;
    grid-row: 2/span 1;
  }
}

.layout--a .griditem__3 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--a .griditem__3 {
    grid-column: 2/span 12;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .layout--a .griditem__3 {
    grid-column: 6/span 8;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 1200px) and (orientation: landscape) {
  .layout--a .griditem__3 {
    column-count: 3;
    column-gap: 2em;
  }
}

/*
=========================
Articles layout
- LAYOUT B
=========================
*/
.layout--b {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-gap: 1em;
  width: 100%;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--b {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-template-rows: 1em repeat(3, auto) 1em;
    grid-gap: 1em;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .layout--b {
    grid-template-rows: 1em repeat(2, auto) 1em;
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:first-child .layout--b,
  article section:last-child .layout--b {
    max-height: calc(100vh - 40px);
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:last-child:last-child .layout--b {
    max-height: calc(100vh - 65px);
  }
}

.layout--b .griditem__1 {
  grid-column: 2/span 6;
  padding-top: 2em;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--b .griditem__1 {
    grid-column: 2/span 7;
    grid-row: 2/span 2;
    padding-top: 0;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .layout--b .griditem__1 {
    grid-column: 2/span 4;
  }
}

.layout--b .griditem__2 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 600px) {
  .layout--b .griditem__2 {
    grid-column: 2/span 3;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--b .griditem__2 {
    grid-column: 9/span 5;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .layout--b .griditem__2 {
    grid-column: 6/span 4;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/7) {
  .layout--b .griditem__2 {
    grid-column: 6/span 3;
  }
}

.layout--b .griditem__3 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 600px) {
  .layout--b .griditem__3 {
    grid-column: 5/span 3;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--b .griditem__3 {
    grid-column: 9/span 5;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .layout--b .griditem__3 {
    grid-column: 10/span 4;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/7) {
  .layout--b .griditem__3 {
    grid-column: 9/span 3;
  }
}

.layout--b .griditem__4 {
  grid-column: 2/span 6;
  padding-bottom: 1em;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--b .griditem__4 {
    grid-column: 2/span 12;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 1000px) and (orientation: landscape) {
  .layout--b .griditem__4 {
    grid-column: 6/span 8;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/7) {
  .layout--b .griditem__4 {
    grid-column: 6/span 6;
  }
}

/*
=========================
Articles layout
- LAYOUT C
=========================
*/
.layout--c {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  grid-gap: 0;
  width: 100%;
}
@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--c.hor-lft {
    grid-template-columns: auto 1fr 1fr;
  }
  .layout--c.hor-cen {
    grid-template-columns: 1fr auto 1fr;
  }
  .layout--c.hor-rgt {
    grid-template-columns: 1fr 1fr auto;
  }
  .layout--c.vrt-top {
    grid-template-rows: auto 1fr 1fr;
  }
  .layout--c.vrt-cen {
    grid-template-rows: 1fr auto 1fr;
  }
  .layout--c.vrt-bot {
    grid-template-rows: 1fr 1fr auto;
  }
}

.layout--c .griditem__1 {
  grid-column: 1/span 3;
  grid-row: 1/span 3;
}

.layout--c .griditem__1 div {
  width: 100vw;
  height: 100vh;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--c .griditem__1 div {
    width: 100%;
    height: calc(100vh - 65px);
  }
}

article section:first-child .layout--c .griditem__1 div,
article section:last-child .layout--c .griditem__1 div {
  height: calc(100vh - 25px);
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:first-child .layout--c .griditem__1 div,
  article section:last-child .layout--c .griditem__1 div {
    height: calc(100vh - 65px);
  }
}

article section:first-child:last-child .layout--c .griditem__1 div,
main.moment .layout--c .griditem__1 div {
  height: calc(100vh - 65px);
}

.layout--c .griditem__1 div img {
  object-fit: cover;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}

.layout--c .griditem__2 {
  grid-column: 1/span 3;
  grid-row: 1/span 3;
  padding: 1em;
}
@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--c .griditem__2 {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
}

@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--c.horizontal-left .griditem__2 {
    grid-column-start: 1;
  }
  .layout--c.horizontal-centre .griditem__2 {
    grid-column-start: 2;
  }
  .layout--c.horizontal-right .griditem__2 {
    grid-column-start: 3;
  }
  .layout--c.vertical-top .griditem__2 {
    grid-row-start: 1;
  }
  .layout--c.vertical-centre .griditem__2 {
    grid-row-start: 2;
  }
  .layout--c.vertical-bottom .griditem__2 {
    grid-row-start: 3;
  }
}

.layout--c .griditem__2 div {
  max-width: 100vw;
}
@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--c .griditem__2 div {
    max-width: 50vw;
  }
}
@media screen and (orientation: landscape), screen and (min-width: 1000px) {
  .layout--c .griditem__2 div {
    max-width: 20em;
  }
}

/*
=========================
Articles layout
- LAYOUT D
=========================
*/
.layout--d {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-gap: 1em;
  width: 100%;
  padding: 1em 0;
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--d {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-template-rows: 1em repeat(12, 1fr) 1em;
    padding: 0;
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:first-child .layout--d,
  article section:last-child .layout--d {
    max-height: calc(100vh - 40px);
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:last-child:last-child .layout--d {
    max-height: calc(100vh - 65px);
  }
}

.layout--d .griditem__1 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--d .griditem__1 {
    grid-column: 7/span 7;
    grid-row: 2/span 6;
  }
}

.layout--d .griditem__2 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--d .griditem__2 {
    grid-column: 7/span 7;
    grid-row: 8/span 3;
  }
}

.layout--d .griditem__3 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--d .griditem__3 {
    grid-column: 7/span 7;
    grid-row: 13/span 1;
    align-self: end;
    margin-bottom: -0.25em;
  }
}

.layout--d .griditem__4 {
  grid-column: 2/span 3;
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--d .griditem__4 {
    grid-column: 2/span 5;
    grid-row: 2/span 6;
  }
}

.layout--d .griditem__5 {
  grid-column: 5/span 3;
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--d .griditem__5 {
    grid-column: 2/span 5;
    grid-row: 8/span 6;
  }
}

/*
=========================
Articles layout
- LAYOUT E
=========================
*/
.layout--e {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-gap: 1em;
  width: 100%;
  padding: 1em 0;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--e {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-template-rows: 1em repeat(3, auto) 1em;
    grid-gap: 1em;
    padding: 0;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--e {
    grid-template-rows: 1em minmax(1fr, 10em) minmax(1fr, 10em) 1em;
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:first-child .layout--e,
  article section:last-child .layout--e {
    max-height: calc(100vh - 40px);
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:last-child:last-child .layout--e {
    max-height: calc(100vh - 65px);
  }
}

.layout--e .griditem__1 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--e .griditem__1 {
    grid-column: 2/span 12;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--e .griditem__1 {
    grid-column: 2/span 4;
    grid-row: 2/span 2;
  }
}

.layout--e .griditem__2 {
  grid-column: 2/span 6;
}
@media screen and (orientation: landscape) {
  .layout--e .griditem__2 {
    grid-column: 2/span 3;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--e .griditem__2 {
    grid-column: 2/span 6;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--e .griditem__2 {
    grid-column: 6/span 4;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .layout--e .griditem__2 {
    grid-column: 6/span 3;
  }
}

.layout--e .griditem__3 {
  grid-column: 2/span 6;
}
@media screen and (orientation: landscape) {
  .layout--e .griditem__3 {
    grid-column: 5/span 3;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--e .griditem__3 {
    grid-column: 8/span 6;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--e .griditem__3 {
    grid-column: 10/span 4;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .layout--e .griditem__3 {
    grid-column: 9/span 3;
  }
}

.layout--e .griditem__4 {
  grid-column: 2/span 6;
}
@media screen and (orientation: landscape) {
  .layout--e .griditem__4 {
    grid-column: 2/span 3;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--e .griditem__4 {
    grid-column: 2/span 6;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--e .griditem__4 {
    grid-column: 6/span 4;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .layout--e .griditem__4 {
    grid-column: 6/span 3;
  }
}

.layout--e .griditem__5 {
  grid-column: 2/span 6;
}
@media screen and (orientation: landscape) {
  .layout--e .griditem__5 {
    grid-column: 5/span 3;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--e .griditem__5 {
    grid-column: 8/span 6;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--e .griditem__5 {
    grid-column: 10/span 4;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .layout--e .griditem__5 {
    grid-column: 9/span 3;
  }
}

/*
=========================
Articles layout
- LAYOUT F
=========================
*/
.layout--f {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-gap: 1em;
  width: 100%;
  padding: 1em 0;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--f {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-template-rows: 1em repeat(3, auto) 1em;
    grid-gap: 1em;
    padding: 0;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--f {
    grid-template-rows: 1em minmax(1fr, 10em) minmax(1fr, 10em) 1em;
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:first-child .layout--f,
  article section:last-child .layout--f {
    max-height: calc(100vh - 40px);
  }
}

@media screen and (min-width: 700px) and (min-height: 600px) {
  article section:last-child:last-child .layout--f {
    max-height: calc(100vh - 65px);
  }
}

.layout--f .griditem__1 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--f .griditem__1 {
    grid-column: 2/span 12;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--f .griditem__1 {
    grid-column: 2/span 6;
    grid-row: 2/span 2;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .layout--f .griditem__1 {
    grid-column: 2/span 8;
    grid-row: 2/span 1;
  }
}

.layout--f .griditem__2 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 600px) and (orientation: landscape) {
  .layout--f .griditem__2 {
    grid-column: 2/span 3;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--f .griditem__2 {
    grid-column: 4/span 8;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--f .griditem__2 {
    grid-column: 8/span 6;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .layout--f .griditem__2 {
    grid-column: 2/span 6;
    grid-row: 3/span 1;
  }
}

.layout--f .griditem__3 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 600px) and (orientation: landscape) {
  .layout--f .griditem__3 {
    grid-column: 5/span 3;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .layout--f .griditem__3 {
    grid-column: 4/span 8;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 700px) and (min-height: 600px) and (orientation: landscape) {
  .layout--f .griditem__3 {
    grid-column: 8/span 6;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .layout--f .griditem__3 {
    grid-column: 8/span 6;
    grid-row: 3/span 1;
  }
}

/* ===============================
   for reflecting page
   =============================== */
/*
=========================
=========================
Reflecting
=========================
=========================
*/
.body--reflecting {
  min-height: 100vh;
}

main.reflecting {
  min-height: calc(100vh - 65px);
  background-color: #F9F9F7;
}

.layout--reflecting {
  display: grid;
  grid-template-columns: 0 1fr 0;
  grid-template-rows: 0 auto auto auto auto 0;
  grid-column-gap: 1em;
  grid-row-gap: 0.5em;
  align-content: center;
  min-height: calc(100vh - 65px);
}
@media screen and (orientation: landscape) {
  .layout--reflecting {
    grid-template-columns: 0 min-content 1fr 0;
    grid-template-rows: 0 auto auto auto 0;
    grid-row-gap: 1em;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .layout--reflecting {
    grid-template-columns: 1em 1fr 1em;
    grid-template-rows: 1em auto auto auto 2.5em 2.5em;
  }
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting {
    grid-template-columns: 1em auto calc(100vh - (4em + 65px)) auto 1em;
    grid-template-rows: 1em auto 2.5em 2.5em;
    max-width: 100%;
    justify-content: center;
  }
}
@media screen and (min-width: 900px) and (max-aspect-ratio: 10/7) {
  .layout--reflecting {
    grid-template-columns: 1em calc(100vh - (4em + 65px)) auto 1em;
    grid-template-rows: 1em min-content auto 2.5em 2.5em;
  }
}

.layout--reflecting .griditem--title {
  grid-column: 2/span 1;
  grid-row: 2/span 1;
  padding-right: 33.33%;
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting .griditem--title {
    text-align: center;
    grid-row: 2/span 2;
    padding-right: 0;
  }
}
@media screen and (min-width: 900px) and (max-aspect-ratio: 10/7) {
  .layout--reflecting .griditem--title {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}

.layout--reflecting .griditem--title .reflecting-title {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  margin: 0;
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting .griditem--title .reflecting-title {
    height: 100%;
    padding-bottom: 0;
  }
}

.layout--reflecting .griditem--title .reflecting-title span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.layout--reflecting .griditem--content {
  grid-column: 2/span 1;
  grid-row: 3/span 1;
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting .griditem--content {
    grid-column: 4/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 900px) and (max-aspect-ratio: 10/7) {
  .layout--reflecting .griditem--content {
    grid-column: 3/span 1;
    grid-row: 3/span 1;
  }
}

.layout--reflecting .griditem--content p {
  max-width: 24em;
}

.layout--reflecting .griditem--collage {
  grid-column: 2/span 1;
  grid-row: 4/span 1;
  overflow: hidden;
}
@media screen and (orientation: landscape) {
  .layout--reflecting .griditem--collage {
    grid-column: 3/span 1;
    grid-row: 2/span 3;
  }
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting .griditem--collage {
    grid-row: 2/span 2;
  }
}
@media screen and (min-width: 900px) and (max-aspect-ratio: 10/7) {
  .layout--reflecting .griditem--collage {
    grid-column: 2/span 1;
    grid-row: 2/span 3;
  }
}

.layout--reflecting .griditem--collage a {
  display: block;
  float: left;
  width: 33.3333333333%;
  padding: 1px;
}
@media screen and (orientation: landscape) {
  .layout--reflecting .griditem--collage a {
    max-width: calc((99vh - (3em + 65px)) / 3);
  }
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting .griditem--collage a {
    width: calc((99vh - (4em + 65px)) / 3);
  }
}

.layout--reflecting .griditem--collage a img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.layout--reflecting .griditem--sharing {
  grid-column: 2/span 1;
  grid-row: 5/span 1;
  display: flex;
  justify-content: flex-start;
}
@media screen and (orientation: landscape) {
  .layout--reflecting .griditem--sharing {
    grid-column: 2/span 1;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 900px) and (orientation: landscape) {
  .layout--reflecting .griditem--sharing {
    grid-column: 4/span 1;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 900px) and (max-aspect-ratio: 10/7) {
  .layout--reflecting .griditem--sharing {
    grid-column: 3/span 1;
    grid-row: 4/span 1;
  }
}

/* ===============================
   for audio-log
       video-log
       postcard
   =============================== */
/*
=========================
VIDEO-LOG
AUDIO-LOG
POSTCARD
=========================
*/
main.media-page {
  display: flex;
  align-items: center;
  background-color: #F9F9F7;
}

main.media-page article {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-gap: 1em;
  align-content: center;
  width: 100%;
  min-height: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
}
@media screen and (min-width: 700px) {
  main.media-page article {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-template-rows: 1em calc((100vw - 2em) * 0.333) min-content 1fr 1em;
    grid-gap: 1em;
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  main.media-page article {
    grid-template-rows: 1em min-content min-content 1fr 1em;
    max-width: 88em;
    margin-left: auto;
    margin-right: auto;
  }
}

.media-page .griditem__1 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  .media-page .griditem__1 {
    grid-column: 2/span 7;
    grid-row: 2/span 3;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .media-page .griditem__1 {
    grid-column: 2/span 5;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .media-page .griditem__1 {
    grid-column: 2/span 4;
  }
}

.media-page .griditem__2 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  .media-page .griditem__2 {
    grid-column: 2/span 7;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .media-page .griditem__2 {
    grid-column: 2/span 5;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .media-page .griditem__2 {
    grid-column: 2/span 4;
  }
}

.media-page .griditem__3 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  .media-page .griditem__3 {
    grid-column: 9/span 5;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .media-page .griditem__3 {
    grid-column: 7/span 3;
    grid-row: 2/span 2;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .media-page .griditem__3 {
    grid-column: 6/span 3;
  }
}

.media-page .griditem__4 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  .media-page .griditem__4 {
    grid-column: 9/span 5;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .media-page .griditem__4 {
    grid-column: 10/span 4;
    grid-row: 2/span 1;
    grid-row: 2/span 2;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .media-page .griditem__4 {
    grid-column: 9/span 3;
  }
}

.media-page .griditem__5 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  .media-page .griditem__5 {
    grid-column: 2/span 12;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .media-page .griditem__5 {
    grid-column: 7/span 7;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 1000px) and (min-aspect-ratio: 10/6) {
  .media-page .griditem__5 {
    grid-column: 6/span 6;
  }
}

.media-page .griditem__5 img {
  max-width: 100%;
}
@media screen and (min-width: 700px) {
  .media-page .griditem__5 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*
=========================
GALLERY LATTICE
=========================
*/
@media only screen and (min-width: 700px) and (min-height: 600px) {
  .lattice {
    height: auto;
    top: auto;
    padding: 40px 0 25px;
  }
}

.lattice.theme-dark {
  background-color: #0d0d0d;
}

/*
=========================
GALLERY LATTICE HEADER
=========================
*/
.lattice--header {
  display: grid;
  align-content: center;
  justify-content: center;
}

.lattice--header-image {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  max-height: 75vh;
}

.lattice--header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lattice--header-text {
  color: #fff;
  text-align: center;
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  justify-self: stretch;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2em;
}

.lattice--header-copy {
  max-width: 36em;
  margin: 0 auto;
}

/*
=========================
GALLERY LATTICE GRID
=========================
*/
.lattice--grid {
  display: grid;
  grid-gap: 1em;
  padding: 1em;
}

.lattice--grid-item {
  display: block;
  margin: 0;
}

.lattice--grid-item a {
  display: block;
  width: 100%;
  height: 100%;
}

.lattice--grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
.lattice--grid {
  counter-reset: figure;
  }

figure::before {
  position: absolute;
  counter-increment: figure;
  content: counter(figure);
  background-color: #fff;
  padding: 0.5em;
  }
*/
@media screen and (min-width: 600px) {
  .lattice--grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
  }
}
@media screen and (min-width: 760px) and (max-width: 1199px) {
  .lattice--grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
  }
  .auto-flow .lattice--grid-item:nth-child(12n+1) {
    grid-column: 1/3;
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(24n+15) {
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(24n+17) {
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(24n+4) {
    grid-column: 3/-1;
    height: calc((100vw - 3em) / 4);
  }
  .auto-flow .lattice--grid-item:nth-child(12n+7) {
    grid-column: 3/-1;
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(24n+8) {
    grid-column: 1/3;
    height: calc((100vw - 3em) / 4);
  }
}
@media screen and (min-width: 1200px) {
  .lattice--grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .auto-flow .lattice--grid-item:nth-child(30n+1) {
    grid-column-start: span 2;
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(30n+4) {
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(30n+6) {
    grid-column-start: span 2;
    height: calc((100vw - 7em) / 6);
  }
  .auto-flow .lattice--grid-item:nth-child(30n+10) {
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(30n+12) {
    grid-column-start: span 2;
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(30n+13) {
    grid-column-start: span 2;
    height: calc((100vw - 7em) / 6);
  }
  .auto-flow .lattice--grid-item:nth-child(30n+16) {
    grid-column-start: span 2;
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(30n+19) {
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(30n+23) {
    grid-row-start: span 2;
  }
  .auto-flow .lattice--grid-item:nth-child(30n+26) {
    grid-column-start: span 2;
    grid-row-start: span 2;
  }
}
/*
=========================
GALLERY LANES
=========================
*/
@media only screen and (min-width: 700px) and (min-height: 600px) {
  .lanes {
    height: auto;
    top: auto;
    padding: 40px 0 25px;
  }
}

.lanes.theme-dark {
  background-color: #0d0d0d;
}

/*
=========================
GALLERY LANES HEADER
=========================
*/
.lanes--header {
  display: grid;
  align-content: center;
  justify-content: center;
}

.lanes--header-image {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  max-height: 75vh;
}

.lanes--header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lanes--header-text {
  color: #fff;
  text-align: center;
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  justify-self: stretch;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2em;
}

.lanes--header-copy {
  max-width: 36em;
  margin: 0 auto;
}

/*
=========================
GALLERY LANES GRID
=========================
*/
.lanes--grid {
  column-width: 230px;
  padding: 1em;
}

.lanes--grid-item {
  display: block;
  margin: 0 0 1em;
}

.lanes--grid-item a {
  display: block;
  width: 100%;
  height: 100%;
}

.lanes--grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
=========================
GALLERY STACKED
=========================
*/
@media only screen and (min-width: 640px) and (min-height: 600px) {
  .stacked {
    height: auto;
    top: auto;
    padding: 40px 0 25px;
  }
}

.stacked--grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  grid-gap: 1em;
  padding: 1em;
}

.stacked--item {
  background-color: #fff;
  padding: 1em;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  margin: 0;
}

.stacked--item img {
  width: auto;
  max-width: 100%;
}

.stacked--item figcaption {
  padding: 1em 0 0;
  margin: 0;
}

.stacked--item figcaption p {
  font-size: 1em;
  line-height: 1;
  margin: 0;
}

@media only screen and (min-width: 640px) and (min-height: 1000px) and (orientation: portrait) {
  .stacked--grid {
    height: calc(100vh - 65px);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(11, 1fr);
    grid-gap: 0;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    padding: 0;
  }
  .stacked--item {
    box-shadow: 0 2px 15px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
  }
  .stacked--item div img {
    max-width: calc(55.55vw - 2em);
    max-height: calc(calc(100vh - 65px) * 0.41 - 4em);
  }
  .stacked--item:nth-child(1) {
    grid-column: 1/6;
    grid-row: 1/6;
    z-index: 1;
    transform: rotate(20deg) scale(0.7);
  }
  .stacked--item:nth-child(2) {
    grid-column: 3/8;
    grid-row: 1/6;
    z-index: 8;
    transform: rotate(8deg) scale(0.7);
  }
  .stacked--item:nth-child(3) {
    grid-column: 5/10;
    grid-row: 1/6;
    z-index: 3;
    transform: rotate(-15deg) scale(0.7);
  }
  .stacked--item:nth-child(4) {
    grid-column: 1/6;
    grid-row: 3/8;
    z-index: 7;
    transform: rotate(-17deg) scale(0.7);
  }
  .stacked--item:nth-child(5) {
    grid-column: 3/8;
    grid-row: 3/8;
    z-index: 12;
    transform: rotate(-6deg) scale(0.7);
  }
  .stacked--item:nth-child(6) {
    grid-column: 5/10;
    grid-row: 3/8;
    z-index: 6;
    transform: rotate(13deg) scale(0.7);
  }
  .stacked--item:nth-child(7) {
    grid-column: 1/6;
    grid-row: 5/10;
    z-index: 4;
    transform: rotate(5deg) scale(0.7);
  }
  .stacked--item:nth-child(8) {
    grid-column: 3/8;
    grid-row: 5/10;
    z-index: 11;
    transform: rotate(7deg) scale(0.7);
  }
  .stacked--item:nth-child(9) {
    grid-column: 5/10;
    grid-row: 5/10;
    z-index: 10;
    transform: rotate(17deg) scale(0.7);
  }
  .stacked--item:nth-child(10) {
    grid-column: 1/6;
    grid-row: 7/12;
    z-index: 9;
    transform: rotate(-15deg) scale(0.7);
  }
  .stacked--item:nth-child(11) {
    grid-column: 3/8;
    grid-row: 7/12;
    z-index: 2;
    transform: rotate(10deg) scale(0.7);
  }
  .stacked--item:nth-child(12) {
    grid-column: 5/10;
    grid-row: 7/12;
    z-index: 5;
    transform: rotate(-5deg) scale(0.7);
  }
  .stacked--grid .stacked--item:hover,
  .stacked--grid .stacked--item:focus,
  .stacked--grid .stacked--item:active {
    z-index: 13;
    outline: none;
    transform: rotate(0deg) scale(1);
  }
}
@media only screen and (min-width: 1000px) and (min-height: 640px) and (orientation: landscape) {
  .stacked--grid {
    height: calc(100vh - 65px);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-gap: 0;
    justify-items: center;
    align-items: center;
    overflow: hidden;
    padding: 0;
  }
  .stacked--item {
    box-shadow: 0 2px 15px 4px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
  }
  .stacked--item div img {
    max-width: calc(45.45vw - 2em);
    max-height: calc(calc(100vh - 65px) * 0.55 - 4em);
  }
  .stacked--item:nth-child(1) {
    grid-column: 1/6;
    grid-row: 1/6;
    z-index: 1;
    transform: rotate(20deg) scale(0.7);
  }
  .stacked--item:nth-child(2) {
    grid-column: 3/8;
    grid-row: 1/6;
    z-index: 8;
    transform: rotate(8deg) scale(0.7);
  }
  .stacked--item:nth-child(3) {
    grid-column: 5/10;
    grid-row: 1/6;
    z-index: 3;
    transform: rotate(-15deg) scale(0.7);
  }
  .stacked--item:nth-child(4) {
    grid-column: 7/12;
    grid-row: 1/6;
    z-index: 7;
    transform: rotate(-17deg) scale(0.7);
  }
  .stacked--item:nth-child(5) {
    grid-column: 1/6;
    grid-row: 3/8;
    z-index: 6;
    transform: rotate(-6deg) scale(0.7);
  }
  .stacked--item:nth-child(6) {
    grid-column: 3/8;
    grid-row: 3/8;
    z-index: 12;
    transform: rotate(13deg) scale(0.7);
  }
  .stacked--item:nth-child(7) {
    grid-column: 5/10;
    grid-row: 3/8;
    z-index: 11;
    transform: rotate(-15deg) scale(0.7);
  }
  .stacked--item:nth-child(8) {
    grid-column: 7/12;
    grid-row: 3/8;
    z-index: 10;
    transform: rotate(3deg) scale(0.7);
  }
  .stacked--item:nth-child(9) {
    grid-column: 1/6;
    grid-row: 5/10;
    z-index: 4;
    transform: rotate(17deg) scale(0.7);
  }
  .stacked--item:nth-child(10) {
    grid-column: 3/8;
    grid-row: 5/10;
    z-index: 9;
    transform: rotate(-15deg) scale(0.7);
  }
  .stacked--item:nth-child(11) {
    grid-column: 5/10;
    grid-row: 5/10;
    z-index: 2;
    transform: rotate(10deg) scale(0.7);
  }
  .stacked--item:nth-child(12) {
    grid-column: 7/12;
    grid-row: 5/10;
    z-index: 5;
    transform: rotate(-5deg) scale(0.7);
  }
  .stacked--grid .stacked--item:hover,
  .stacked--grid .stacked--item:focus,
  .stacked--grid .stacked--item:active {
    z-index: 13;
    outline: none;
    transform: rotate(0deg) scale(1);
  }
}
/*
=========================
GALLERY POLAROID
=========================
*/
@media only screen and (min-width: 700px) and (min-height: 600px) {
  .polaroid {
    height: auto;
    min-height: 100vh;
    top: auto;
    padding: 40px 0 25px;
  }
}

.polaroid--grid {
  position: relative;
  display: grid;
  align-items: stretch;
}

.polaroid--grid.small {
  grid-template-columns: 1fr;
  grid-gap: clamp(0.5em, 1vw, 1em);
  padding: 0 clamp(0.5em, 1vw, 1em) clamp(0.5em, 1vw, 1em);
}
@media only screen and (min-width: 500px) {
  .polaroid--grid.small {
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
  }
}

.polaroid--grid.medium {
  grid-template-columns: 1fr;
  grid-gap: clamp(1em, 2vw, 2em);
  padding: 0 clamp(1em, 2vw, 2em) clamp(1em, 2vw, 2em);
}
@media only screen and (min-width: 500px) {
  .polaroid--grid.medium {
    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  }
}

.polaroid--grid.large {
  grid-template-columns: 1fr;
  grid-gap: clamp(1.5em, 3vw, 3em);
  padding: 0 clamp(1.5em, 3vw, 3em) clamp(1.5em, 3vw, 3em);
}
@media only screen and (min-width: 500px) {
  .polaroid--grid.large {
    grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
  }
}

/*
=========================
SIZING BUTTONS
=========================
*/
.polaroid--sizer {
  text-align: center;
  padding: 1em;
}

.polaroid--header .polaroid--sizer {
  text-align: left;
  padding: 0;
}

.polaroid--sizer a {
  display: inline-block;
  margin: 0 0.5em;
}

.polaroid--header .polaroid--sizer a {
  margin: 0 1em 0 0;
}

.polaroid--sizer a.small {
  font-size: 0.875em;
}

.polaroid--sizer a.medium {
  font-size: 1em;
}

.polaroid--sizer a.large {
  font-size: 1.125em;
}

/*
=========================
ITEM & HEADER
=========================
*/
.polaroid--header,
.polaroid--item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  padding: 5%;
  margin: 0;
}

.polaroid--grid.small .polaroid--header {
  grid-column-start: 1;
  grid-column-end: -1;
}
@media only screen and (min-width: 700px) {
  .polaroid--grid.small .polaroid--header {
    grid-column-end: 3;
  }
}

.polaroid--header.alt {
  justify-content: end;
  background-color: transparent;
  box-shadow: none;
}

.polaroid--header.alt *:last-child {
  margin-bottom: 0;
}

.polaroid--header-title {
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 0.5em;
}

.polaroid--grid.small .polaroid--header-title {
  font-size: 1.75em;
}

.polaroid--grid.medium .polaroid--header-title {
  font-size: 2em;
}

.polaroid--grid.large .polaroid--header-title {
  font-size: 2.5em;
}

.polaroid--item-image {
  margin-bottom: 5%;
}

.polaroid--item img {
  width: auto;
  max-width: 100%;
}

.polaroid--item-title {
  max-width: 100%;
  padding: 0;
}

.polaroid--grid.small .polaroid--item-title {
  font-size: 0.875em;
}

.polaroid--grid.medium .polaroid--item-title {
  font-size: 1em;
}

.polaroid--grid.large .polaroid--item-title {
  font-size: 1.125em;
}

.polaroid--item-title h2 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}

/*
=========================
EXTRA CONTENT
=========================
*/
.polaroid--item-extra {
  display: none; /*" ----- temporary to be removed ----- "*/
  max-width: 100%;
}

/* ===============================
   for  postcard
   =============================== */
/*
=========================
VIDEO-LOG
AUDIO-LOG
POSTCARD
=========================
*/
.postcardnew {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F9F9F7;
}

[class^=postcardnew-layout] {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-gap: 1em;
  align-content: center;
  width: 100%;
  min-height: 100%;
  padding-top: 1em;
  padding-bottom: 1em;
}
@media screen and (min-width: 700px) {
  [class^=postcardnew-layout] {
    height: calc(100vh - 65px - 2em);
    min-height: inherit;
    grid-gap: 1em;
    padding: 1em;
  }
}

@media screen and (min-width: 700px) {
  [class^=postcardnew-layout-sq-sq-sq-sq] {
    height: auto;
  }
}

.postcardnew-copy {
  grid-column: 2/span 6;
}

.postcardnew article > figure {
  grid-column: 2/span 6;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.postcardnew article > figure > a {
  display: block;
  width: 100%;
  height: 100%;
}

.postcardnew article > figure > a > img {
  max-width: 100%;
}
@media screen and (min-width: 700px) {
  .postcardnew article > figure > a > img {
    max-width: 100;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

.postcardnew-media {
  margin-top: 1em;
}

/* LAYOUTS */
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-land {
    grid-template-columns: minmax(30em, 36em) 1fr;
    grid-template-rows: min-content 1fr;
  }
  .postcardnew-layout-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land > figure.postcardnew-img1-land {
    grid-column: 1/span 2;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-land {
    grid-template-columns: minmax(30em, 1fr) 3fr;
    grid-template-rows: repeat(2, min-content);
  }
  .postcardnew-layout-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land > figure.postcardnew-img1-land {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port {
    grid-template-columns: minmax(20em, 1fr) 3fr;
    grid-template-rows: min-content 1fr;
  }
  .postcardnew-layout-port > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port {
    grid-template-columns: minmax(20em, 36em) minmax(auto, 55vh);
    grid-template-rows: 1fr min-content;
    justify-content: center;
  }
  .postcardnew-layout-port > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-land-land {
    grid-template-columns: 24em 1fr;
  }
  .postcardnew-layout-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
    margin-top: -0.5em;
  }
  .postcardnew-layout-land-land > figure.postcardnew-img1-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-land-land > figure.postcardnew-img2-land {
    grid-column: 1/span 2;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-land-land {
    grid-template-columns: 24em minmax(auto, 86vh);
    grid-template-rows: 1fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
    margin-top: -0.5em;
  }
  .postcardnew-layout-land-land > figure.postcardnew-img1-land {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land-land > figure.postcardnew-img2-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-port {
    grid-template-columns: auto 20em 20em auto;
    grid-template-rows: min-content 1fr;
  }
  .postcardnew-layout-port-port > div.postcardnew-copy {
    grid-column: 2/span 2;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port > figure.postcardnew-img1-port {
    grid-column: 1/span 2;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port > figure.postcardnew-img2-port {
    grid-column: 3/span 2;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-port {
    grid-template-columns: minmax(20em, 24em) minmax(auto, 50vh) minmax(auto, 50vh);
    grid-template-rows: 1fr min-content;
    justify-content: center;
  }
  .postcardnew-layout-port-port > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port > figure.postcardnew-img2-port {
    grid-column: 3/span 1;
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-land {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content 1fr;
  }
  .postcardnew-layout-port-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-land > figure.postcardnew-img2-land {
    grid-column: 1/span 2;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-land {
    grid-template-columns: minmax(20em, 30em) minmax(auto, 55vh);
    grid-template-rows: 2fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-port-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-land > figure.postcardnew-img2-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-port-port {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content auto;
  }
  .postcardnew-layout-port-port-port > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port > figure.postcardnew-img2-port {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port-port > figure.postcardnew-img3-port {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-port-port {
    grid-template-columns: minmax(20em, 24em) minmax(auto, 55vh) minmax(auto, 28vh);
    grid-template-rows: 1fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-port-port-port > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-port > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-port > figure.postcardnew-img2-port {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port > figure.postcardnew-img3-port {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-port-land {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content auto;
  }
  .postcardnew-layout-port-port-land > div.postcardnew-copy {
    grid-column: 1/span 2;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-land > figure.postcardnew-img1-port {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-land > figure.postcardnew-img2-port {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port-land > figure.postcardnew-img3-land {
    grid-column: 2/span 2;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-port-land {
    grid-template-columns: minmax(20em, 24em) minmax(auto, 30vh) minmax(auto, 30vh);
    grid-template-rows: 2fr 1.25fr;
    justify-content: center;
  }
  .postcardnew-layout-port-port-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-land > figure.postcardnew-img2-port {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-land > figure.postcardnew-img3-land {
    grid-column: 2/span 2;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-land-land {
    grid-template-columns: minmax(20em, 24em) 1fr;
    grid-template-rows: auto auto;
  }
  .postcardnew-layout-port-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-land-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-land-land > figure.postcardnew-img2-land {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-land-land > figure.postcardnew-img3-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-land-land {
    grid-template-columns: minmax(20em, 24em) 1fr 1.75fr;
    grid-template-rows: auto auto;
    justify-content: center;
  }
  .postcardnew-layout-port-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-land-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-land-land > figure.postcardnew-img2-land {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-land-land > figure.postcardnew-img3-land {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-land-land-land {
    grid-template-columns: minmax(20em, 24em) 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
  .postcardnew-layout-land-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 3;
  }
  .postcardnew-layout-land-land-land > figure.postcardnew-img1-land {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land-land-land > figure.postcardnew-img2-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-land-land-land > figure.postcardnew-img3-land {
    grid-column: 2/span 1;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-land-land-land {
    grid-template-columns: minmax(20em, 26em) minmax(auto, 70vh);
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-land-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 3;
  }
  .postcardnew-layout-land-land-land > figure.postcardnew-img1-land {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land-land-land > figure.postcardnew-img2-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-land-land-land > figure.postcardnew-img3-land {
    grid-column: 2/span 1;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-port-port-port {
    grid-template-columns: minmax(10em, 14em) minmax(10em, 14em) 1fr;
    grid-template-rows: auto 1fr;
  }
  .postcardnew-layout-port-port-port-port > div.postcardnew-copy {
    grid-column: 1/span 2;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img1-port {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img2-port {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img3-port {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img4-port {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-port-port-port {
    grid-template-columns: minmax(20em, 26em) minmax(auto, 30vh) minmax(auto, 30vh);
    grid-template-rows: 1fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-port-port-port-port > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img2-port {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img3-port {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img4-port {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) and (min-width: 1200px) {
  .postcardnew-layout-port-port-port-port {
    grid-template-columns: minmax(20em, 26em) minmax(auto, 37vh) minmax(auto, 37vh) minmax(auto, 25vh);
    grid-template-rows: 1fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-port-port-port-port > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img2-port {
    grid-column: 3/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img3-port {
    grid-column: 4/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-port > figure.postcardnew-img4-port {
    grid-column: 4/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-port-port-land {
    grid-template-columns: minmax(10em, 14em) minmax(10em, 14em) 1fr;
  }
  .postcardnew-layout-port-port-port-land > div.postcardnew-copy {
    grid-column: 1/span 2;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img1-port {
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img2-port {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img3-port {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img4-land {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-port-port-land {
    grid-template-columns: minmax(20em, 26em) minmax(auto, 33vh) minmax(auto, 33vh) minmax(auto, 33vh);
    grid-template-rows: auto auto;
    justify-content: center;
  }
  .postcardnew-layout-port-port-port-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img2-port {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img3-port {
    grid-column: 4/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-port-land > figure.postcardnew-img4-land {
    grid-column: 2/span 3;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-port-land-land {
    grid-template-columns: minmax(20em, 26em) 1fr;
    grid-template-rows: 50% auto 1fr 1fr;
  }
  .postcardnew-layout-port-port-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img2-port {
    grid-column: 2/span 1;
    grid-row: 2/span 3;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img3-land {
    grid-column: 1/span 1;
    grid-row: 3/span 1;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img4-land {
    grid-column: 1/span 1;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-port-land-land {
    grid-template-columns: minmax(20em, 26em) minmax(auto, 36vh) 0.5fr minmax(auto, 36vh);
    grid-template-rows: 1fr 0.5fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-port-port-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 3;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img2-port {
    grid-column: 4/span 1;
    grid-row: 2/span 2;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img3-land {
    grid-column: 3/span 2;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-port-land-land > figure.postcardnew-img4-land {
    grid-column: 2/span 2;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-port-land-land-land {
    grid-template-columns: minmax(20em, 26em) 1fr;
    grid-template-rows: auto 1fr 1fr;
  }
  .postcardnew-layout-port-land-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img2-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img3-land {
    grid-column: 1/span 1;
    grid-row: 3/span 1;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img4-land {
    grid-column: 2/span 1;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-port-land-land-land {
    grid-template-columns: minmax(20em, 26em) minmax(auto, 30vh) minmax(auto, 45vh);
    grid-template-rows: 1fr 1fr 1.5fr;
    justify-content: center;
  }
  .postcardnew-layout-port-land-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 3;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img1-port {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img2-land {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img3-land {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-port-land-land-land > figure.postcardnew-img4-land {
    grid-column: 2/span 2;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-land-land-land-land {
    grid-template-columns: minmax(20em, 26em) 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .postcardnew-layout-land-land-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 4;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img1-land {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img2-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img3-land {
    grid-column: 2/span 1;
    grid-row: 3/span 1;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img4-land {
    grid-column: 2/span 1;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-land-land-land-land {
    grid-template-columns: minmax(20em, 26em) 1fr 1fr;
    grid-template-rows: minmax(auto, 27vw) minmax(auto, 27vw);
    justify-content: center;
  }
  .postcardnew-layout-land-land-land-land > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img1-land {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img2-land {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img3-land {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-land-land-land-land > figure.postcardnew-img4-land {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: portrait) {
  .postcardnew-layout-sq-sq-sq-sq {
    grid-template-columns: minmax(20em, 26em) minmax(20em, 26em);
    grid-template-rows: repeat(3, minmax(auto, calc((100vh - 65px - 4em) / 3)));
  }
  .postcardnew-layout-sq-sq-sq-sq > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 3;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img1-sq {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img2-sq {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img3-sq {
    grid-column: 2/span 1;
    grid-row: 3/span 1;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img4-sq {
    grid-column: 1/span 1;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 700px) and (orientation: landscape) {
  .postcardnew-layout-sq-sq-sq-sq {
    grid-template-columns: minmax(20em, 26em) repeat(2, minmax(auto, calc((100vh - 65px - 4em) / 2)));
    grid-template-rows: 1fr 1fr;
    justify-content: center;
  }
  .postcardnew-layout-sq-sq-sq-sq > div.postcardnew-copy {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img1-sq {
    grid-column: 2/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img2-sq {
    grid-column: 3/span 1;
    grid-row: 1/span 1;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img3-sq {
    grid-column: 2/span 1;
    grid-row: 2/span 1;
  }
  .postcardnew-layout-sq-sq-sq-sq > figure.postcardnew-img4-sq {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
  }
}
/* ===============================
   for moment
   =============================== */
/*
=========================
Moment
=========================
*/
main.moment {
  background-color: #F9F9F7;
  min-height: inherit;
}

.layout--moment {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(3, auto);
  grid-gap: 0;
  width: 100%;
  height: calc(100vh - 65px);
}
@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--moment.horizontal-left {
    grid-template-columns: auto 1fr 1fr;
  }
  .layout--moment.horizontal-centre {
    grid-template-columns: 1fr auto 1fr;
  }
  .layout--moment.horizontal-right {
    grid-template-columns: 1fr 1fr auto;
  }
  .layout--moment.vertical-top {
    grid-template-rows: auto 1fr 1fr;
  }
  .layout--moment.vertical-centre {
    grid-template-rows: 1fr auto 1fr;
  }
  .layout--moment.vertical-bottom {
    grid-template-rows: 1fr 1fr auto;
  }
}

.layout--moment .griditem__1 {
  grid-column: 1/span 3;
  grid-row: 1/span 3;
}

.layout--moment .griditem__1 div {
  width: 100vw;
  height: calc(100vh - 65px);
}

.layout--moment .griditem__1 div img {
  object-fit: cover;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
}

.griditem__2_editable {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  grid-column: 1/span 3;
  grid-row: 2/span 3;
  padding: 1em;
}
@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .griditem__2_editable {
    grid-column: 1/span 2;
    grid-row: 1/span 1;
  }
}

.layout--moment .griditem__2 {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 1em;
  grid-column: 1/span 2;
  grid-row: 1/span 2;
  padding: 1em;
}
@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--moment .griditem__2 {
    grid-column: 1/span 1;
    grid-row: 1/span 1;
  }
}

@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--moment.horizontal-left .griditem__2 {
    grid-column-start: 1;
  }
  .layout--moment.horizontal-centre .griditem__2 {
    grid-column-start: 2;
  }
  .layout--moment.horizontal-right .griditem__2 {
    grid-column-start: 3;
  }
  .layout--moment.vertical-top .griditem__2 {
    grid-row-start: 1;
  }
  .layout--moment.vertical-centre .griditem__2 {
    grid-row-start: 2;
  }
  .layout--moment.vertical-bottom .griditem__2 {
    grid-row-start: 3;
  }
}

.layout--moment .griditem__2 div {
  max-width: 100vw;
}
@media screen and (orientation: landscape), screen and (min-width: 700px) {
  .layout--moment .griditem__2 div {
    max-width: 50vw;
  }
}
@media screen and (orientation: landscape), screen and (min-width: 1000px) {
  .layout--moment .griditem__2 div {
    max-width: 30em;
  }
}

/* ===============================
   for home
   =============================== */
/*
=========================
Home
=========================
*/
main.home {
  background-color: #F9F9F7;
  min-height: calc(100vh - 65px);
  display: flex;
}

main.home article {
  display: grid;
  grid-template-columns: 0 repeat(6, 1fr) 0;
  grid-gap: 1em;
  width: 100%;
  max-width: 1400px;
  padding: 2em 0;
  margin: auto;
}
@media screen and (min-width: 700px) {
  main.home article {
    grid-template-columns: 0 repeat(12, 1fr) 0;
    grid-gap: 2em;
    align-items: center;
  }
}
@media screen and (min-width: 1000px) {
  main.home article {
    align-items: flex-start;
  }
}

main.home article .griditem__1 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  main.home article .griditem__1 {
    grid-row: 1/span 1;
  }
}

main.home article .griditem__2 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  main.home article .griditem__2 {
    grid-row: 2/span 1;
  }
}

main.home article .griditem__3 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  main.home article .griditem__3 {
    grid-column: 8/span 6;
    grid-row: 2/span 1;
  }
}
@media screen and (min-width: 1000px) {
  main.home article .griditem__3 {
    grid-column: 2/span 6;
    grid-row: 3/span 1;
    align-self: center;
  }
}

main.home article .griditem__4 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  main.home article .griditem__4 {
    grid-column: 5/span 9;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 1000px) {
  main.home article .griditem__4 {
    grid-column: 8/span 6;
    grid-row: 2/span 1;
  }
}

main.home article .griditem__5 {
  grid-column: 3/span 4;
}
@media screen and (min-width: 700px) {
  main.home article .griditem__5 {
    grid-column: 2/span 3;
    grid-row: 3/span 1;
  }
}
@media screen and (min-width: 1000px) {
  main.home article .griditem__5 {
    grid-column: 8/span 2;
    grid-row: 3/span 1;
    align-self: center;
  }
}

main.home article .griditem__6 {
  grid-column: 2/span 6;
}
@media screen and (min-width: 700px) {
  main.home article .griditem__6 {
    grid-column: 5/span 6;
    grid-row: 4/span 1;
  }
}
@media screen and (min-width: 1000px) {
  main.home article .griditem__6 {
    grid-column: 10/span 4;
    grid-row: 3/span 1;
    align-self: center;
  }
}

/* ===============================
   for esay
   =============================== */
/*
=========================
ESSAY
=========================
*/
@media only screen and (min-width: 700px) and (min-height: 600px) {
  main.essay {
    height: auto;
    top: auto;
  }
}

.essay article {
  display: grid;
  grid-template-columns: 1em repeat(12, 1fr) 1em;
  grid-column-gap: 1em;
  grid-row-gap: 2em;
  width: 100%;
  background-color: #F9F9F7;
  margin-top: 40px;
}
@media screen and (min-width: 1000px) {
  .essay article {
    grid-template-rows: auto;
    font-size: 16px;
  }
}

.essay article img {
  display: block;
  max-width: 100%;
}

.essay article figure {
  margin: 0;
}

.essay article figure figcaption p {
  font-style: italic;
  color: #878776;
}

.essay article figure figcaption p:last-child {
  margin-bottom: 0;
}

/*
=========================
ESSAY - TEXT ONLY HEADER
=========================
*/
.essay--text-only-header {
  grid-column: 2/span 12;
  padding: 4em 0 0;
}
@media screen and (min-width: 700px) {
  .essay--text-only-header {
    grid-column: 3/span 10;
  }
}
@media screen and (min-width: 1000px) {
  .essay--text-only-header {
    grid-column: 4/span 8;
  }
}
@media screen and (min-width: 1200px) {
  .essay--text-only-header {
    grid-column: 3/span 8;
  }
}
@media screen and (min-width: 1400px) {
  .essay--text-only-header {
    grid-column: 4/span 6;
  }
}
@media screen and (min-width: 1800px) {
  .essay--text-only-header {
    grid-column: 5/span 4;
  }
}

/*
=========================
ESSAY - INTRODUCTION
=========================
*/
.essay--intro-image {
  grid-column: 1/span 14;
}
@media screen and (min-width: 500px) {
  .essay--intro-image {
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 1000px) {
  .essay--intro-image {
    grid-row: 1/span 1;
  }
}

.essay--intro-text {
  grid-column: 2/span 12;
}
@media screen and (min-width: 500px) {
  .essay--intro-text {
    grid-column: 2/span 12;
    grid-row: 2/span 2;
    align-self: flex-end;
    background-color: #F9F9F7;
    padding: 2em;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  }
}
@media screen and (min-width: 700px) {
  .essay--intro-text {
    grid-column: 3/span 10;
  }
}
@media screen and (min-width: 1000px) {
  .essay--intro-text {
    grid-row: 1/span 1;
    box-shadow: none;
  }
}

/* Horizontal alignement */
@media screen and (min-width: 1000px) {
  .essay--intro-text.horizontal-left {
    grid-column: 1/span 6;
  }
  .essay--intro-text.horizontal-right {
    grid-column: 9/span 6;
  }
}
@media screen and (min-width: 1200px) {
  .essay--intro-text.horizontal-left {
    grid-column: 1/span 5;
  }
  .essay--intro-text.horizontal-right {
    grid-column: 10/span 5;
  }
}
/* Vertical alignement */
@media screen and (min-width: 1000px) {
  .essay--intro-text.vertical-top {
    align-self: flex-start;
  }
  .essay--intro-text.vertical-middle {
    align-self: center;
  }
  .essay--intro-text.vertical-bottom {
    align-self: flex-end;
  }
}
/* Inset versions */
@media screen and (min-width: 1000px) {
  .essay--intro-text.inset {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  }
  .essay--intro-text.inset.vertical-top {
    margin-top: 2em;
  }
  .essay--intro-text.inset.vertical-bottom {
    margin-bottom: 2em;
  }
  .essay--intro-text.inset.horizontal-left {
    grid-column: 2/span 5;
  }
  .essay--intro-text.inset.horizontal-right {
    grid-column: 9/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .essay--intro-text.inset.horizontal-left {
    grid-column: 2/span 4;
  }
  .essay--intro-text.inset.horizontal-right {
    grid-column: 10/span 4;
  }
}
/* Rounded versions */
@media screen and (min-width: 1000px) {
  .essay--intro-text.rounded.vertical-top.horizontal-left {
    border-radius: 0 0 1em 0;
  }
  .essay--intro-text.rounded.vertical-top.horizontal-right {
    border-radius: 0 0 0 1em;
  }
  .essay--intro-text.rounded.vertical-middle.horizontal-left {
    border-radius: 0 1em 1em 0;
  }
  .essay--intro-text.rounded.vertical-middle.horizontal-right {
    border-radius: 1em 0 0 1em;
  }
  .essay--intro-text.rounded.vertical-bottom.horizontal-left {
    border-radius: 0 1em 0 0;
  }
  .essay--intro-text.rounded.vertical-bottom.horizontal-right {
    border-radius: 1em 0 0 0;
  }
  .essay--intro-text.rounded.inset {
    border-radius: 1em !important;
  }
}
/*
=========================
ESSAY - COMPONENTS
=========================
*/
.essay--component-container {
  grid-column: 1/span 14;
}

.essay--component {
  display: grid;
  grid-template-columns: 1em repeat(12, 1fr) 1em;
  grid-column-gap: 1em;
  grid-row-gap: 2em;
  width: 100%;
  margin: 2.5em 0;
}

.essay--component:last-child .essay--text,
.essay--component:last-child .essay--quote,
.essay--component:last-child .essay--card,
.essay--component:last-child .essay--video,
.essay--component:last-child .essay--audio,
.essay--component:last-child [class^=essay--image] {
  padding-bottom: 4em;
  padding-bottom: clamp(4em, 10vw, 8em);
}

.essay-edit-mode .essay--component {
  padding: 2em 0 0;
  border: 10px solid #333;
  border-bottom: none;
  margin: 0;
}

/*
=========================
ESSAY - BODY TEXT
=========================
*/
.essay--text {
  grid-column: 2/span 12;
}
@media screen and (min-width: 700px) {
  .essay--text {
    grid-column: 3/span 10;
  }
}
@media screen and (min-width: 1000px) {
  .essay--text {
    grid-column: 4/span 8;
  }
}
@media screen and (min-width: 1200px) {
  .essay--text {
    grid-column: 3/span 8;
  }
}
@media screen and (min-width: 1400px) {
  .essay--text {
    grid-column: 4/span 6;
  }
}
@media screen and (min-width: 1800px) {
  .essay--text {
    grid-column: 5/span 4;
  }
}

.essay--text.with-columns {
  grid-column: 2/span 12;
  column-width: 30em;
  column-gap: 2em;
}

/*
=========================
ESSAY - BLOCKQUOTE
=========================
*/
.essay--quote {
  display: block;
  grid-column: 2/span 12;
  display: grid;
  grid-column-gap: 1em;
  position: relative;
  margin: 0;
}
@media screen and (min-width: 700px) {
  .essay--quote {
    grid-column: 1/span 14;
    grid-template-columns: 1em repeat(12, 1fr) 1em;
  }
}

.essay--quote:before {
  content: "“";
  font-size: 6em;
  line-height: 1;
  text-align: center;
  color: #cdcdbd;
  display: block;
  height: 0.5em;
  grid-column: 1/span 1;
}
@media screen and (min-width: 700px) {
  .essay--quote:before {
    grid-column: 2/span 1;
  }
}
@media screen and (min-width: 1000px) {
  .essay--quote:before {
    grid-column: 3/span 1;
  }
}
@media screen and (min-width: 1200px) {
  .essay--quote:before {
    grid-column: 2/span 1;
  }
}
@media screen and (min-width: 1400px) {
  .essay--quote:before {
    grid-column: 3/span 1;
  }
}
@media screen and (min-width: 1800px) {
  .essay--quote:before {
    grid-column: 4/span 1;
  }
}

.essay--quote div {
  grid-column: 2/span 1;
}
@media screen and (min-width: 700px) {
  .essay--quote div {
    grid-column: 3/span 10;
  }
}
@media screen and (min-width: 1000px) {
  .essay--quote div {
    grid-column: 4/span 8;
  }
}
@media screen and (min-width: 1200px) {
  .essay--quote div {
    grid-column: 3/span 8;
  }
}
@media screen and (min-width: 1400px) {
  .essay--quote div {
    grid-column: 4/span 6;
  }
}
@media screen and (min-width: 1800px) {
  .essay--quote div {
    grid-column: 5/span 4;
  }
}

.essay--quote p {
  font-size: 1.333em;
}

.essay--quote p {
  margin-bottom: 0.5em;
}

.essay--quote p:last-of-type {
  margin-bottom: 0;
}

.essay--quote cite {
  font-weight: 200;
  font-style: normal;
  color: #878776;
}

/*
=========================
ESSAY - CARD
=========================
*/
.essay--card {
  grid-column: 2/-2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  grid-gap: 1em;
}

.essay--card .card {
  max-width: 24em;
  margin: 0 auto;
}

/*
=========================
ESSAY - VIDEO
=========================
*/
.essay--video {
  grid-column: 1/span 14;
  align-items: flex-end;
  /*   padding: 2em 0; */
}
@media screen and (min-width: 1000px) {
  .essay--video {
    display: grid;
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-gap: 1em;
    width: 100%;
  }
}

.essay--video .videoComponent {
  display: block;
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .essay--video .videoComponent {
    grid-column: 2/span 12;
  }
}
@media screen and (min-width: 1200px) {
  .essay--video .videoComponent {
    grid-column: 3/span 8;
    grid-row: 1/span 1;
  }
}

.essay--video figcaption {
  padding: 1em 2em 0;
}
@media screen and (min-width: 1000px) {
  .essay--video figcaption {
    grid-column: 2/span 12;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .essay--video figcaption {
    grid-column: 11/span 3;
    grid-row: 1/span 1;
    padding: 0;
  }
}

/*
=========================
ESSAY - PANORAMA
=========================
*/
.essay--panorama {
  grid-column: 1/span 14;
  align-items: flex-end;
  width: 100%;
  height: 500px;
}
@media screen and (min-width: 1000px) {
  .essay--panorama {
    display: grid;
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-gap: 1em;
    width: 100%;
    height: 500px;
  }
}

.essay--panorama .panoramaComponent {
  display: block;
  width: 100%;
  height: 500px;
}
@media screen and (min-width: 1000px) {
  .essay--panorama .panoramaComponent {
    grid-column: 2/span 12;
  }
}
@media screen and (min-width: 1200px) {
  .essay--panorama .panoramaComponent {
    grid-column: 3/span 8;
    grid-row: 1/span 1;
  }
}

.essay--panorama figcaption {
  padding: 1em 2em 0;
  margin-bottom: 2em;
}
@media screen and (min-width: 1000px) {
  .essay--panorama figcaption {
    grid-column: 2/span 12;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .essay--panorama figcaption {
    grid-column: 11/span 3;
    grid-row: 1/span 1;
    padding: 0;
  }
}

/*
=========================
ESSAY - AUDIO
=========================
*/
.essay--audio {
  grid-column: 1/span 14;
  align-items: flex-end;
}
@media screen and (min-width: 1000px) {
  .essay--audio {
    display: grid;
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-gap: 1em;
    width: 100%;
  }
}

.essay--audio .audioComponent {
  display: block;
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .essay--audio .audioComponent {
    grid-column: 2/span 12;
  }
}
@media screen and (min-width: 1200px) {
  .essay--audio .audioComponent {
    grid-column: 3/span 8;
    grid-row: 1/span 1;
  }
}

.essay--audio figcaption {
  padding: 1em 2em 0;
}
@media screen and (min-width: 1000px) {
  .essay--audio figcaption {
    grid-column: 2/span 12;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .essay--audio figcaption {
    grid-column: 11/span 3;
    grid-row: 1/span 1;
    padding: 0;
  }
}

/*
=========================
ESSAY - SINGLE IMAGE
=========================
*/
.essay--image1 {
  grid-column: 1/span 14;
  align-items: flex-end;
}
@media screen and (min-width: 1000px) {
  .essay--image1 {
    display: grid;
    grid-template-columns: 1em repeat(12, 1fr) 1em;
    grid-gap: 1em;
    width: 100%;
  }
}

.essay--image1 > a {
  display: block;
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .essay--image1 > a {
    grid-column: 2/span 12;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image1 > a {
    grid-column: 3/span 8;
    grid-row: 1/span 1;
  }
}

.essay--image1 figcaption {
  padding: 1em 2em 0;
}
@media screen and (min-width: 1000px) {
  .essay--image1 figcaption {
    grid-column: 2/span 12;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image1 figcaption {
    grid-column: 11/span 3;
    grid-row: 1/span 1;
    padding: 0;
  }
}

/*
=========================
ESSAY - 2 IMAGE BLOCK
=========================
*/
.essay--image2 {
  grid-column: 1/span 14;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  width: 100%;
}
@media screen and (min-width: 700px) {
  .essay--image2 {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
  }
}

.essay--image2 > a {
  display: block;
}

.essay--image2 > a:nth-child(odd) {
  grid-column: 1/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image2 > a:nth-child(odd) {
    grid-column: 3/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image2 > a:nth-child(odd) {
    grid-column: 3/span 4;
  }
}

.essay--image2 > a:nth-child(even) {
  grid-column: 2/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image2 > a:nth-child(even) {
    grid-column: 8/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image2 > a:nth-child(even) {
    grid-column: 7/span 4;
  }
}

.essay--image2 figcaption {
  grid-column: 1/span 2;
  padding: 0 2em;
}
@media screen and (min-width: 700px) {
  .essay--image2 figcaption {
    grid-column: 3/span 10;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image2 figcaption {
    grid-column: 11/span 3;
    grid-row: 1/span 1;
    align-self: flex-end;
    padding: 0;
  }
}

/*
=========================
ESSAY - 3 IMAGE BLOCK
=========================
*/
.essay--image3 {
  grid-column: 1/span 14;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  width: 100%;
}
@media screen and (min-width: 700px) {
  .essay--image3 {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
  }
}

.essay--image3 > a {
  display: block;
}

.essay--image3 > a:nth-child(3n+1) {
  grid-column: 1/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image3 > a:nth-child(3n+1) {
    grid-column: 2/span 4;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image3 > a:nth-child(3n+1) {
    grid-column: 2/span 3;
  }
}

.essay--image3 > a:nth-child(3n+2) {
  grid-column: 2/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image3 > a:nth-child(3n+2) {
    grid-column: 6/span 4;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image3 > a:nth-child(3n+2) {
    grid-column: 5/span 3;
  }
}

.essay--image3 > a:nth-child(3n+3) {
  grid-column: 3/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image3 > a:nth-child(3n+3) {
    grid-column: 10/span 4;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image3 > a:nth-child(3n+3) {
    grid-column: 8/span 3;
  }
}

.essay--image3 figcaption {
  grid-column: 1/span 3;
  padding: 0 2em;
}
@media screen and (min-width: 700px) {
  .essay--image3 figcaption {
    grid-column: 2/span 12;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image3 figcaption {
    grid-column: 11/span 3;
    grid-row: 1/span 1;
    align-self: flex-end;
    padding: 0;
  }
}

/*
=========================
ESSAY - 4 IMAGE BLOCK
ALL SAME ASPECT RATIO
=========================
*/
.essay--image4same {
  grid-column: 1/span 14;
  display: grid;
  grid-template-columns: 1em repeat(2, 1fr) 1em;
  grid-gap: 1em;
  width: 100%;
}
@media screen and (min-width: 700px) {
  .essay--image4same {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
  }
}

.essay--image4same > a {
  display: block;
}

.essay--image4same > a:nth-child(4n+1) {
  grid-column: 2/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image4same > a:nth-child(4n+1) {
    grid-column: 2/span 3;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4same > a:nth-child(4n+1) {
    grid-column: 3/span 4;
  }
}

.essay--image4same > a:nth-child(4n+2) {
  grid-column: 3/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image4same > a:nth-child(4n+2) {
    grid-column: 5/span 3;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4same > a:nth-child(4n+2) {
    grid-column: 7/span 4;
  }
}

.essay--image4same > a:nth-child(4n+3) {
  grid-column: 2/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image4same > a:nth-child(4n+3) {
    grid-column: 8/span 3;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4same > a:nth-child(4n+3) {
    grid-column: 3/span 4;
  }
}

.essay--image4same > a:nth-child(4n+4) {
  grid-column: 3/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image4same > a:nth-child(4n+4) {
    grid-column: 11/span 3;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4same > a:nth-child(4n+4) {
    grid-column: 7/span 4;
  }
}

.essay--image4same figcaption {
  grid-column: 2/span 2;
  padding: 0;
}
@media screen and (min-width: 700px) {
  .essay--image4same figcaption {
    grid-column: 2/span 12;
    padding: 0;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4same figcaption {
    grid-column: 11/span 3;
    align-self: flex-end;
    padding: 0;
  }
}

/*
=========================
ESSAY - 4 IMAGE BLOCK
2 LANDSCAPE / 2 PORTRAIT
=========================
*/
.essay--image4mixed {
  grid-column: 1/span 14;
  display: grid;
  grid-template-columns: 1em repeat(2, 1fr) 1em;
  grid-template-rows: repeat(3, min-content);
  grid-gap: 1em;
  width: 100%;
}
@media screen and (min-width: 700px) {
  .essay--image4mixed {
    grid-template-columns: 1em repeat(12, 1fr) 1em;
  }
}

.essay--image4mixed > a {
  display: block;
}

.essay--image4mixed > a:nth-child(4n+1) {
  grid-column: 2/span 1;
  grid-row: 1/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image4mixed > a:nth-child(4n+1) {
    grid-column: 3/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4mixed > a:nth-child(4n+1) {
    grid-column: 3/span 4;
  }
}

.essay--image4mixed > a:nth-child(4n+2) {
  grid-column: 3/span 1;
  grid-row: 1/span 2;
}
@media screen and (min-width: 700px) {
  .essay--image4mixed > a:nth-child(4n+2) {
    grid-column: 8/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4mixed > a:nth-child(4n+2) {
    grid-column: 7/span 4;
  }
}

.essay--image4mixed > a:nth-child(4n+3) {
  grid-column: 3/span 1;
  grid-row: 3/span 1;
}
@media screen and (min-width: 700px) {
  .essay--image4mixed > a:nth-child(4n+3) {
    grid-column: 8/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4mixed > a:nth-child(4n+3) {
    grid-column: 7/span 4;
  }
}

.essay--image4mixed > a:nth-child(4n+4) {
  grid-column: 2/span 1;
  grid-row: 2/span 2;
}
@media screen and (min-width: 700px) {
  .essay--image4mixed > a:nth-child(4n+4) {
    grid-column: 3/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4mixed > a:nth-child(4n+4) {
    grid-column: 3/span 4;
  }
}

.essay--image4mixed figcaption {
  grid-column: 2/span 2;
  padding: 0;
}
@media screen and (min-width: 700px) {
  .essay--image4mixed figcaption {
    grid-column: 3/span 10;
  }
}
@media screen and (min-width: 1200px) {
  .essay--image4mixed figcaption {
    grid-column: 11/span 3;
    grid-row: 3/span 1;
    align-self: flex-end;
    padding: 0;
  }
}

/*
=========================
ESSAY - FULL SCREEN
=========================
*/
.essay--full-screen {
  position: relative;
  grid-column: 1/span 14;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: calc(100vh - 40px);
}
@media screen and (min-width: 700px) and (min-height: 600px) {
  .essay--full-screen {
    grid-template-rows: calc(100vh - 65px);
  }
}

.essay--full-screen.light-text {
  color: #fff;
}

.essay--full-screen.dark-text {
  color: #282823;
}

.lighten-image .essay--full-screen-img img {
  filter: brightness(3) contrast(30%);
}

.darken-image .essay--full-screen-img img {
  filter: brightness(0.5) contrast(100%);
}

* + .essay--full-screen {
  grid-template-rows: 100vh;
}

.essay--full-screen-img {
  grid-column: 1/span 1;
  grid-row: 1/span 1;
}

.essay--full-screen-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.essay--full-screen-heading {
  text-align: center;
  grid-column: 1/span 1;
  grid-row: 1/span 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.essay--full-screen-heading div {
  max-width: 48em;
  padding: 1em;
}

.essay--full-screen-credit {
  text-align: center;
  position: absolute;
  left: 1em;
  right: 1em;
  bottom: 5vh;
}

/*
=========================
ESSAY - EDIT CONTROLS
=========================
*/
.essay--editcontrols {
  grid-column: 1/15;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.essay--editcontrols-remove {
  border-bottom: 5px solid #333;
}

.essay--editcontrols-add {
  border-top: 5px solid #333;
}

.essay--editcontrols svg {
  display: block;
  width: 36px;
  height: 36px;
  fill: #fff;
  padding: 10px;
  border-radius: 50%;
  margin: 1em auto;
  transition: all ease 0.2s;
}
.essay--editcontrols svg:hover, .essay--editcontrols svg:focus, .essay--editcontrols svg:active {
  transform: scale(1.2);
}

.essay--editcontrols-remove svg {
  background-color: #f70118;
}

.essay--editcontrols-add svg {
  background-color: #378800;
}

/* ===============================
   for card collections
   =============================== */
/*
=========================
CARD COLLECTIONS
=========================
*/
@media only screen and (min-width: 700px) and (min-height: 600px) {
  main.card-page {
    height: auto;
    top: auto;
  }
}

main.card-page > div {
  display: grid;
  grid-template-columns: 1em repeat(12, 1fr) 1em;
  grid-column-gap: 1em;
  grid-row-gap: 2em;
  width: 100%;
  background-color: #F9F9F7;
  padding: 0 0 2em;
  margin-top: 40px;
}

/*
=========================
CARD COLLECTION - INTRO
=========================
*/
.card-collection--intro-image {
  grid-column: 1/span 14;
}
@media screen and (min-width: 500px) {
  .card-collection--intro-image {
    grid-row: 1/span 2;
  }
}
@media screen and (min-width: 1000px) {
  .card-collection--intro-image {
    grid-row: 1/span 1;
  }
}

.card-collection--intro-image img {
  max-width: 100%;
}

.card-collection--intro-text {
  grid-column: 2/span 12;
}
@media screen and (min-width: 500px) {
  .card-collection--intro-text {
    grid-column: 2/span 12;
    grid-row: 2/span 2;
    align-self: flex-end;
    background-color: #F9F9F7;
    padding: 2em;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  }
}
@media screen and (min-width: 700px) {
  .card-collection--intro-text {
    grid-column: 3/span 10;
  }
}
@media screen and (min-width: 1000px) {
  .card-collection--intro-text {
    grid-row: 1/span 1;
    box-shadow: none;
  }
}

/* Horizontal alignement */
@media screen and (min-width: 1000px) {
  .card-collection--intro-text.horizontal-left {
    grid-column: 1/span 6;
  }
  .card-collection--intro-text.horizontal-right {
    grid-column: 9/span 6;
  }
}
@media screen and (min-width: 1200px) {
  .card-collection--intro-text.horizontal-left {
    grid-column: 1/span 5;
  }
  .card-collection--intro-text.horizontal-right {
    grid-column: 10/span 5;
  }
}
/* Vertical alignement */
@media screen and (min-width: 1000px) {
  .card-collection--intro-text.vertical-top {
    align-self: flex-start;
  }
  .card-collection--intro-text.vertical-middle {
    align-self: center;
  }
  .card-collection--intro-text.vertical-bottom {
    align-self: flex-end;
  }
}
/* Inset versions */
@media screen and (min-width: 1000px) {
  .card-collection--intro-text.inset {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  }
  .card-collection--intro-text.inset.vertical-top {
    margin-top: 2em;
  }
  .card-collection--intro-text.inset.vertical-bottom {
    margin-bottom: 2em;
  }
  .card-collection--intro-text.inset.horizontal-left {
    grid-column: 2/span 5;
  }
  .card-collection--intro-text.inset.horizontal-right {
    grid-column: 9/span 5;
  }
}
@media screen and (min-width: 1200px) {
  .card-collection--intro-text.inset.horizontal-left {
    grid-column: 2/span 4;
  }
  .card-collection--intro-text.inset.horizontal-right {
    grid-column: 10/span 4;
  }
}
/* Rounded versions */
@media screen and (min-width: 1000px) {
  .card-collection--intro-text.rounded.vertical-top.horizontal-left {
    border-radius: 0 0 1em 0;
  }
  .card-collection--intro-text.rounded.vertical-top.horizontal-right {
    border-radius: 0 0 0 1em;
  }
  .card-collection--intro-text.rounded.vertical-middle.horizontal-left {
    border-radius: 0 1em 1em 0;
  }
  .card-collection--intro-text.rounded.vertical-middle.horizontal-right {
    border-radius: 1em 0 0 1em;
  }
  .card-collection--intro-text.rounded.vertical-bottom.horizontal-left {
    border-radius: 0 1em 0 0;
  }
  .card-collection--intro-text.rounded.vertical-bottom.horizontal-right {
    border-radius: 1em 0 0 0;
  }
  .card-collection--intro-text.rounded.inset {
    border-radius: 1em !important;
  }
}
/*
=========================
CARDS
=========================
*/
.card-collection {
  grid-column: 1/span 14;
  display: grid;
  grid-gap: 1.5em;
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
  list-style: none;
  padding: 1em;
  margin: 0 auto;
}
@media screen and (min-width: 700px) {
  .card-collection {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1200px) {
  .card-collection {
    grid-template-columns: repeat(3, minmax(auto, 24em));
  }
}
@media screen and (min-width: 1400px) {
  .card-collection {
    grid-template-columns: repeat(4, minmax(auto, 24em));
  }
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  position: relative;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 700px) {
  .card__double-width {
    grid-column: 1/span 2;
    grid-row: 1/span 2;
  }
}

.card:hover,
.card:focus-within {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2), 0 0 0 1.5em #ddecc7;
}

.card-collection__curated .card:hover,
.card-collection__curated .card:focus-within {
  box-shadow: 0 0 0 5px #7EB928;
}

.card a:focus {
  outline: none;
  text-decoration: underline;
}

.card:focus-within a:focus {
  text-decoration: none;
}

/*
=========================
CARD TEXT
=========================
*/
.card--text {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto min-content;
  height: 10.5em;
  padding: 1em;
}

.curated__weight1 .card--text,
.curated__weight2 .card--text,
.curated__weight3 .card--text {
  display: block;
  height: auto;
}

.curated__weight3 .card--text {
  height: auto;
}
@media screen and (min-width: 700px) {
  .curated__weight3 .card--text {
    grid-column: 1/2;
    grid-row: 1/2;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 2em;
  }
}

.card--text h2 {
  font-size: 24px;
  line-height: 1.2;
  padding-bottom: 0.25em;
  margin: 0;
}

@media screen and (min-width: 700px) {
  .card__double-width .card--text h2 {
    font-size: 36px;
  }
}

@media screen and (min-width: 700px) {
  .curated__weight1 .card--text h2 {
    font-size: 20px;
    margin-top: 4px;
  }
}

@media screen and (min-width: 700px) {
  .curated__weight2 .card--text h2 {
    font-size: 24px;
  }
}

@media screen and (min-width: 700px) {
  .curated__weight3 .card--text h2 {
    font-size: 30px;
  }
}

.curated__weight1 .card--text h2 a,
.curated__weight2 .card--text h2 a,
.curated__weight3 .card--text h2 a {
  color: #43433b;
}

.card--text h2 a {
  text-decoration: none;
  color: #7EB928;
}

.card--text h2 a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.card--text p {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.curated__weight1 .card--text p,
.curated__weight2 .card--text p,
.curated__weight3 .card--text p {
  margin: 0 0 0.5em;
}

.card--text p:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2em;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgb(255, 255, 255)), linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgb(255, 255, 255));
}

.curated__weight1 .card--text p:after,
.curated__weight2 .card--text p:after,
.curated__weight3 .card--text p:after {
  display: none;
}

.card--text small {
  display: block;
  margin: 0;
}

.card--text small a {
  text-decoration: none;
  position: relative;
  padding: 0.5em 0;
}
.card--text small a:hover, .card--text small a:focus, .card--text small a:active {
  text-decoration: underline;
}

.curated__weight1 .card--text small a,
.curated__weight2 .card--text small a,
.curated__weight3 .card--text small a {
  color: #43433b;
}

/*
=========================
CARD IMAGE
=========================
*/
.card--img {
  position: relative;
  height: 15em;
}

@media screen and (min-width: 700px) {
  .card__double-width .card--img {
    height: 32em;
  }
}

@media screen and (min-width: 1200px) {
  .card__double-width + .card .card--img,
  .card__double-width + .card + .card .card--img {
    height: 10em;
  }
}

@media screen and (min-width: 1400px) {
  .card__double-width + .card .card--img,
  .card__double-width + .card + .card .card--img,
  .card__double-width + .card + .card + .card .card--img,
  .card__double-width + .card + .card + .card + .card .card--img {
    height: 10em;
  }
}

.curated__weight1 .card--img {
  height: 10em;
}

.curated__weight2 .card--img {
  height: 20em;
}
@media screen and (min-width: 700px) {
  .curated__weight2 .card--img {
    height: 25em;
  }
}

.curated__weight3 .card--img {
  height: 30em;
}
@media screen and (min-width: 700px) {
  .curated__weight3 .card--img {
    grid-column: 1/3;
    grid-row: 1/2;
    min-height: 30em;
    height: 100%;
  }
}

.card--img img {
  display: block;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.sidebarBlock--icon svg {
  width: 100%;
  height: 100%;
  fill: #BEBEBE;
}

[class^=card--type-icon] {
  position: absolute;
  top: 1em;
  right: 1em;
  display: block;
  width: 3em;
  height: 3em;
  background-color: #7EB928;
  border-radius: 50%;
}

[class^=card--type-icon] svg {
  width: 50%;
  height: 50%;
  fill: #fff;
  margin: 25%;
}

[class^=card--type-icon] span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
=========================
CARD GALLERY
=========================
*/
.card--gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
  margin: 2px;
}

.card--gallery img {
  max-width: 100%;
}

/*
==================================================
==================================================
CURATED CARDS
==================================================
==================================================
*/
@media screen and (min-width: 700px) {
  .card-collection__curated {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1020px) {
  .card-collection__curated {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1400px) {
  .card-collection__curated {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (min-width: 1800px) {
  .card-collection__curated {
    grid-template-columns: repeat(6, 1fr);
  }
}

/*
=========================
CURATED CARD WEIGHT 2
=========================
*/
@media screen and (min-width: 700px) {
  .card-collection__curated .curated__weight2 {
    grid-column: span 2;
    grid-row: span 2;
  }
}
@media screen and (min-width: 1020px) {
  .card-collection__curated .curated__weight2 {
    grid-column: 1/3;
  }
}

@media screen and (min-width: 700px) {
  .card-collection__curated .curated__weight2:nth-of-type(2n) {
    grid-column: 2/4;
  }
}
@media screen and (min-width: 1020px) {
  .card-collection__curated .curated__weight2:nth-of-type(2n) {
    grid-column: 3/5;
  }
}
@media screen and (min-width: 1400px) {
  .card-collection__curated .curated__weight2:nth-of-type(2n) {
    grid-column: unset;
  }
}

/*
=========================
CURATED CARD WEIGHT 3
=========================
*/
@media screen and (min-width: 700px) {
  .card-collection__curated .curated__weight3 {
    grid-column: span 3;
    display: grid;
    grid-template-columns: calc(33.333% + 0.5em) calc(66.666% - 0.5em);
    grid-gap: 0;
    align-items: center;
  }
}
@media screen and (min-width: 1020px) {
  .card-collection__curated .curated__weight3 {
    grid-row: span 2;
  }
}

/* ===============================
   for magazine
   =============================== */
/*
=========================
MAGAZINE LAYOUT
=========================
*/
@media only screen and (min-width: 700px) and (min-height: 600px) {
  main.magazine {
    min-height: auto;
    height: auto;
    margin: 40px auto 25px;
    top: auto;
  }
}

.magazine-layout {
  display: grid;
  grid-template-columns: 0 1fr 0;
  grid-column-gap: 2em;
  grid-row-gap: 0;
  max-width: 88em;
  margin: 0 auto;
}
@media screen and (min-width: 760px) {
  .magazine-layout {
    grid-template-columns: 0 1fr 18em 0;
  }
}

.magazine-top {
  grid-column: 2/span 1;
}
@media screen and (min-width: 760px) {
  .magazine-top {
    grid-column: 2/span 2;
  }
}

.magazine-category-nav {
  grid-column: 2/span 1;
}
@media screen and (min-width: 760px) {
  .magazine-category-nav {
    grid-column: 2/span 2;
  }
}

.magazine-primary {
  grid-column: 2/span 1;
  margin-top: 2em;
}
@media screen and (min-width: 760px) {
  .magazine-primary {
    grid-column: 2/span 1;
  }
}

.magazine-secondary {
  grid-column: 2/span 1;
  margin-top: 2em;
}
@media screen and (min-width: 760px) {
  .magazine-secondary {
    grid-column: 2/span 1;
  }
}

.magazine-aside {
  grid-column: 2/span 1;
  margin-top: 2em;
}
@media screen and (min-width: 760px) {
  .magazine-aside {
    grid-column: 3/span 1;
    grid-row: 2/span 2;
  }
}

@media screen and (min-width: 760px) {
  .magazine-category-nav ~ .magazine-aside {
    grid-row: 3/span 2;
  }
}

/*
=========================
MAGAZINE TOP
=========================
*/
.magazine-top {
  padding: calc(2em + 2vw) 0;
  border-bottom: 1px solid #cdcdbd;
}

.magazine-top h1 {
  font-size: 5vw;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  margin: 0;
}

@media screen and (max-width: 480px) {
  .magazine-top h1 {
    font-size: 24px;
  }
}
@media screen and (min-width: 1400px) {
  .magazine-top h1 {
    font-size: 70px;
  }
}
.magazine-top--introduction {
  text-align: center;
  max-width: 44em;
  margin: 2vw auto 0;
}

/*
=========================
MAGAZINE CATEGORY NAV
=========================
*/
.magazine-category-nav {
  border-bottom: 1px solid #cdcdbd;
}

.magazine-category-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.magazine-category-nav li {
  display: block;
}

.magazine-category-nav a {
  font-size: 1.1em;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 3;
  color: #282823;
  display: block;
  padding: 0.05em 1em 0;
}

.magazine-category-nav a:hover,
.magazine-category-nav a:focus,
.magazine-category-nav a:active,
.magazine-category-nav li.state-active a {
  color: #7EB928;
}

.magazine-category-nav a svg {
  vertical-align: sub;
  display: inline-block;
  width: 17px;
  height: 17px;
  fill: currentcolor;
  margin-right: 0.333em;
}

/*
=========================
MAGAZINE HERO ITEM
=========================
*/
.magazine-hero--image {
  position: relative;
}

.magazine-hero--image img {
  object-fit: cover;
  max-width: 100%;
  min-height: 100%;
}

.magazine-hero--text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.magazine-hero--title {
  flex-basis: 34em;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 1em 0;
}

.magazine-hero--headline {
  font-size: 2em;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 5.25em;
  margin: 0 0 0.5em;
}

.magazine-hero--lede p {
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 0.5em;
}

.magazine-hero--meta {
  flex-basis: 10em;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
}

.magazine-hero--avatar {
  padding: 0;
}

.magazine-hero--avatar img {
  width: 4.5em;
  height: 4.5em;
  border-radius: 50%;
  margin: 0 auto;
}

.magazine-hero--credit {
  padding: 0.5em 2em 0.5em 1em;
}

.magazine-hero--author {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.25em;
}

.magazine-hero--date {
  font-size: 0.85em;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  margin: 0;
}

/*
=========================
MAGAZINE SECTION INTROS
=========================
*/
.magazine-primary--intro,
.magazine-secondary--intro,
.magazine-aside--intro {
  margin-bottom: 1em;
}

.magazine-primary--intro-title,
.magazine-secondary--intro-title,
.magazine-aside--intro-title {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  display: inline-block;
  color: #939384;
  border-bottom: 1px solid #abab9f;
  margin: 0;
}

/*
=========================
MAGAZINE COMP0NENT ITEM
=========================
*/
.magazine-item {
  display: grid;
  grid-template-columns: minmax(8em, 1fr) 2fr;
  grid-gap: 1em;
  margin-bottom: 2em;
}

.magazine-item--image {
  position: relative;
  overflow: hidden;
  height: 10em;
}

.magazine-item--image img {
  object-fit: cover;
  max-width: 100%;
  min-height: 100%;
}

.magazine-item--title * {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20em;
  max-height: 5.25em;
  margin: 0 0 1em;
}

.magazine-item--meta {
  font-size: 0.9em;
  max-width: 20em;
  margin: 0;
}

.magazine-item--author {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.25em;
}

.magazine-item--date {
  font-size: 0.85em;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  margin: 0;
}

/*
=========================
MAGAZINE GALLERY ITEM
=========================
*/
.magazine-gallery,
a.magazine-gallery {
  text-decoration: none;
  color: #282823;
  display: block;
  margin-bottom: 2em;
  transition: background-color ease 0.3s, box-shadow ease 0.3s;
}
.magazine-gallery:hover, .magazine-gallery:focus, .magazine-gallery:active,
a.magazine-gallery:hover,
a.magazine-gallery:focus,
a.magazine-gallery:active {
  background-color: #ddecc7;
  box-shadow: 0 0 0 0.5em #ddecc7;
}

.magazine-gallery--images {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0.25em;
}

@media screen and (min-width: 1020px) {
  .magazine-secondary .magazine-gallery--images {
    grid-template-columns: repeat(10, 1fr);
  }
}

.magazine-gallery--text {
  margin-top: 0.5em;
}

.magazine-gallery--images img {
  max-width: 100%;
}

.magazine-gallery--title * {
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 5.25em;
  margin: 0 0 0.25em;
}

.magazine-gallery--meta {
  font-size: 0.9em;
  margin: 0;
}

.magazine-gallery--author {
  font-size: 1em;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.25em;
}

.magazine-gallery--date {
  font-size: 0.85em;
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  margin: 0;
}

/*
=========================
ASIDE MODIFICATIONS
=========================
*/
.magazine-aside .magazine-item,
.magazine-aside .magazine-gallery {
  font-size: 0.85em;
}
.magazine-aside .magazine-item--image {
  height: 8em;
}

/*
=========================
ICON OVERLAYS
=========================
*/
[class^=magazine--type-icon] {
  position: absolute;
  z-index: 10;
  top: 1em;
  right: 1em;
  display: block;
  width: 3em;
  height: 3em;
  background-color: #7EB928;
  border-radius: 50%;
}

.magazine-hero [class^=magazine--type-icon] {
  top: 2em;
  right: 2em;
}

.magazine-secondary .magazine-item [class^=magazine--type-icon] {
  top: 0.75em;
  right: 0.75em;
  width: 2.5em;
  height: 2.5em;
}

.magazine-aside .magazine-item [class^=magazine--type-icon] {
  top: 0.5em;
  right: 0.5em;
  width: 2em;
  height: 2em;
}

[class^=magazine--type-icon] svg {
  width: 50%;
  height: 50%;
  fill: #fff;
  margin: 25%;
}

[class^=magazine--type-icon] span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* ===============================
   for join the dots
   =============================== */
/*
=========================
JOIN THE DOTS : VARIABLES
=========================
*/
/*
=========================
JOIN THE DOTS : HEADER
=========================
*/
.jtd--header {
  padding: 40px 40px 20px;
}

.jtd--header *:last-child {
  margin-bottom: 0;
}

.jtd--header-title {
  font-size: 2em;
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 0.5em;
}

.jtd--sizer {
  text-align: left;
  padding: 0;
}

.jtd--sizer a {
  display: inline-block;
  margin: 0 1em 0 0;
}

.jtd--sizer a.small {
  font-size: 0.875em;
}

.jtd--sizer a.medium {
  font-size: 1em;
}

.jtd--sizer a.large {
  font-size: 1.125em;
}

/*
=========================
JOIN THE DOTS : MAIN
=========================
*/
/*
	There is no way to target the first or last item in a flex-row if we are allowing
	the flex items to wrap (for good reasons). We also don't know the height of the
	rows as the content is unknown. That makes adding the "loops" at the beginning 
	and end of each row tricky.
	We added a "loop" before and after EVERY <li> with pseudo elements.
	These pseudo elements are sent behind all the <li>s with some z-index trickery.
	Finally, we give the <li>s a background colour to hide the loops apart from where they stick
	out the sides of the <ul>. 
*/
.join-the-dots {
  font-size: 14px;
  line-height: 1.4;
  list-style: none;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: #F9F9F7;
  padding: 20px;
  margin: 0;
}
@media screen and (min-width: 600px) {
  .join-the-dots {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 40px;
  }
}

@media screen and (max-width: 599px) {
  .edit-mode .join-the-dots {
    background-image: url("/assets/img/2px-green-block.png");
    background-position: center top;
    background-repeat: repeat-y;
    gap: calc(3 * 40px);
  }
}

@media screen and (min-width: 600px) {
  /*
  	We use these pseudo elements to hide the bits of loop that stick out at the top and
  	bottom of the <ul> 
  */
  .join-the-dots::before,
  .join-the-dots::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #F9F9F7;
  }
  .join-the-dots::before {
    top: 38px;
  }
  .join-the-dots::after {
    bottom: 40px;
  }
}
.join-the-dots li {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  background-color: #F9F9F7;
  padding: 0;
}
@media screen and (min-width: 600px) {
  .join-the-dots li {
    flex-direction: column-reverse;
    justify-content: space-between;
    border-bottom: 2px solid #7EB928;
    padding: 40px 0;
  }
}

@media screen and (max-width: 599px) {
  .edit-mode .join-the-dots li {
    flex-direction: column;
  }
}

@media screen and (max-width: 599px) {
  .join-the-dots.reverse li {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 600px) {
  /*
  	These pseudo elements create the loops that flow around from one row to the next
  */
  .join-the-dots li::before,
  .join-the-dots li::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 20px;
    border: 2px solid #7EB928;
  }
  .join-the-dots li::before {
    left: -20px;
    top: -2px;
    bottom: calc(50% + 13px - 1px);
    border-right: none;
    border-radius: 20px 0 0 20px;
  }
  .edit-mode .join-the-dots li::before {
    bottom: calc(50% + 12px);
  }
  .join-the-dots li:first-child::before {
    display: none;
  }
  .join-the-dots li::after {
    left: 100%;
    top: calc(50% - 13px - 1px);
    bottom: -2px;
    border-left: none;
    border-radius: 0 20px 20px 0;
  }
  .join-the-dots li:last-child::after {
    display: none;
  }
  .edit-mode .join-the-dots li::after {
    top: calc(50% - 13px);
  }
}
.jtd-item {
  flex-grow: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - 6em);
  position: relative;
  background-image: url("/assets/img/2px-green-block.png");
  background-position: center top;
  background-repeat: repeat-y;
  padding: 16px;
}
@media screen and (min-width: 600px) {
  .jtd-item {
    flex-grow: 1;
    width: 100%;
    background-position: left center;
    background-repeat: repeat-x;
    margin-bottom: 26px;
  }
}

@media screen and (min-width: 600px) {
  .edit-mode li:first-child .jtd-item {
    margin-bottom: 52px;
  }
}

.jtd-marker + .jtd-item {
  margin-bottom: 0;
}

/*
	Dots at the start and end of the timeline on the first and last items
*/
.join-the-dots li:first-child .jtd-item::before,
.join-the-dots li:last-child .jtd-item::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  background-color: #7EB928;
  border-radius: 50%;
}

.join-the-dots li:first-child .jtd-item::before {
  left: calc(50% - 2px - 1px);
  top: -3px;
}
@media screen and (min-width: 600px) {
  .join-the-dots li:first-child .jtd-item::before {
    left: -3px;
    top: calc(50% - 2px - 1px);
  }
}

.join-the-dots li:last-child .jtd-item::before {
  left: calc(50% - 2px - 1px);
  bottom: -3px;
}
@media screen and (min-width: 600px) {
  .join-the-dots li:last-child .jtd-item::before {
    left: auto;
    right: -3px;
    bottom: calc(50% - 2px - 1px);
  }
}

/*
	Indicator line linking item to timeline markers
*/
.jtd-marker + .jtd-item::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 50%;
  top: calc(50% - 1px);
  bottom: calc(50% - 1px);
  z-index: 1;
  background-color: #7EB928;
}
@media screen and (min-width: 600px) {
  .jtd-marker + .jtd-item::after {
    left: calc(50% - 1px);
    right: calc(50% - 1px);
    top: 50%;
    bottom: -15px;
  }
}

@media screen and (max-width: 599px) {
  .edit-mode .jtd-marker + .jtd-item::after {
    content: none;
  }
}

@media screen and (max-width: 599px) {
  .join-the-dots.reverse .jtd-marker + .jtd-item::after {
    left: 50%;
    right: 0;
  }
}

.jtd-txt {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 600px) {
  .jtd-txt {
    max-width: 200px;
  }
}

@media screen and (min-width: 600px) {
  .join-the-dots.medium .jtd-txt {
    max-width: 300px;
  }
}

@media screen and (min-width: 1000px) {
  .join-the-dots.large .jtd-txt {
    max-width: 400px;
  }
}

.jtd-txt-link {
  display: block;
}

.jtd-txt-link::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 0 6px transparent;
  transition: box-shadow 0.3s ease;
}

.jtd-txt-link:hover::before,
.jtd-txt-link:focus::before,
.jtd-txt-link:active::before {
  box-shadow: 0 0 0 16px hsla(84.3, 60%, 55%, 0.3);
}

.jtd-link-desc {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.jtd-link-icon {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background-color: #7EB928;
  padding: 6px;
}

.jtd-link-icon svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.jtd-txt-inner {
  position: relative;
  max-height: 5.9em;
  overflow: hidden;
}

.jtd-txt-inner a {
  position: relative;
  z-index: 2;
}

.jtd-txt-inner:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 4.5em;
  height: 1.6em;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 15%, rgb(255, 255, 255) 60%);
}

.jtd-img {
  position: relative;
  z-index: 2;
}

.jtd-img a {
  display: block;
  box-shadow: 0 0 0 6px transparent;
  transition: box-shadow 0.3s ease;
}
.jtd-img a:hover, .jtd-img a:focus, .jtd-img a:active {
  box-shadow: 0 0 0 16px hsla(84.3, 60%, 55%, 0.3);
}

.jtd-img img {
  max-width: 200px;
  max-height: 200px;
}

.jtd-img-treatment {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem;
}

@media screen and (min-width: 600px) {
  .join-the-dots.medium .jtd-img img {
    max-width: 300px;
    max-height: 300px;
  }
}

@media screen and (min-width: 1000px) {
  .join-the-dots.large .jtd-img img {
    max-width: 400px;
    max-height: 400px;
  }
}

.jtd-marker {
  font-size: 13px;
  line-height: 1;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6em;
  height: 26px;
  position: relative;
  padding-right: 1em;
}
@media screen and (min-width: 600px) {
  .jtd-marker {
    text-align: center;
    white-space: nowrap;
    width: auto;
    padding-right: 0;
    margin-top: 25px;
  }
}

@media screen and (max-width: 599px) {
  .edit-mode .jtd-marker {
    padding-right: 0;
  }
}

@media screen and (max-width: 599px) {
  .join-the-dots.reverse .jtd-marker {
    text-align: left;
    padding-left: 1em;
    padding-right: 0;
  }
}

.jtd-marker::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  position: absolute;
  right: -3px;
  top: calc(50% - 2px - 1px);
  background-color: #7EB928;
  border-radius: 50%;
}
@media screen and (min-width: 600px) {
  .jtd-marker::before {
    top: -15px;
    left: calc(50% - 2px - 1px);
  }
}

@media screen and (max-width: 599px) {
  .edit-mode .jtd-marker::before {
    content: none;
  }
}

@media screen and (max-width: 599px) {
  .join-the-dots.reverse .jtd-marker::before {
    right: auto;
    left: -3px;
  }
}

.jtd-marker p {
  font-family: sans-serif;
  color: #7EB928;
  line-height: 1.2;
}

.jtd-item-link-edit {
  height: 26px;
  display: flex;
  align-items: center;
}

/*
=========================
JOIN THE DOTS - EDIT CONTROLS
=========================
*/
.jtd--edit-remove,
.jtd--edit-add {
  position: absolute;
}

.jtd--edit-remove {
  left: 50%;
  bottom: 0;
  margin: 0 0 -16px -16px;
}

.jtd--edit-add {
  right: 0;
  top: 50%;
  margin: -16px -16px 0 0;
}

.jtd--start svg,
.jtd--edit-remove svg,
.jtd--edit-add svg {
  display: block;
  width: 32px;
  height: 32px;
  fill: #fff;
  padding: 10px;
  border-radius: 50%;
  margin: 0;
  transition: all ease 0.2s;
}
.jtd--start svg:hover, .jtd--start svg:focus, .jtd--start svg:active,
.jtd--edit-remove svg:hover,
.jtd--edit-remove svg:focus,
.jtd--edit-remove svg:active,
.jtd--edit-add svg:hover,
.jtd--edit-add svg:focus,
.jtd--edit-add svg:active {
  transform: scale(1.2);
}

.jtd--edit-remove svg {
  background-color: #f70118;
}

.jtd--start svg,
.jtd--edit-add svg {
  background-color: #378800;
}

.jtd--start {
  font-size: 16px;
}

.jtd--start svg {
  margin: 0 auto;
}

.join-the-dots *[contenteditable=true] {
  font-family: "Source Sans Pro", sans-serif;
  min-width: 5em;
  background-color: #fff;
  padding: 0.5em;
  border-radius: 4px;
  outline-style: dotted;
  outline-width: 2px;
  outline-color: #00d0f7;
  transition: outline-color 0.2s ease;
}

.join-the-dots *[contenteditable=true]:focus {
  outline-color: #df0116;
  box-shadow: 0 0 0 4px #fec9c9;
}

/* ===============================
   for streams
   =============================== */
/*
=========================
STREAM
=========================
*/
@media only screen and (min-width: 700px) and (min-height: 600px) {
  main.stream {
    height: auto;
    top: auto;
    padding-top: calc(40px + 1em);
    padding-bottom: calc(25px + 1em);
  }
}

.stream-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 600px) auto;
  gap: 0;
}

.stream-item {
  grid-column: 2/3;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  background-color: #fff;
  padding: 2em;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.stream-item:last-child {
  border-bottom: 1px solid #ddd;
}

.stream-post {
  grid-column: 2/3;
  background-color: #fff;
  padding: 2em 2em 0;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
.stream-post:last-child {
  border-bottom: 1px solid #ddd;
}

.stream-post-toggle {
  margin: 0 0 2em;
}

.stream-post-toggle input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.stream-post-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.stream-post-toggle:has(input:checked) + .stream-post-form {
  max-height: 30em;
  padding-bottom: 2em;
}

.stream-post-divider {
  font-family: "Source Sans Pro", sans-serif;
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0;
}

.stream-post-divider:before,
.stream-post-divider:after {
  content: "";
  display: block;
  height: 1px;
  flex-grow: 1;
  background-color: #ccc;
}

.stream-meta {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.stream-avatar {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
}

.stream-meta-text {
  flex-grow: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
}

.stream-meta-author {
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.stream-meta-date {
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  margin: 0;
}

.stream-img {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-radius: 1em;
  overflow: hidden;
}

.stream-img a {
  display: block;
  grid-column: span 1;
}

.stream-img a:first-child:last-child,
.stream-img a:first-child:nth-last-child(odd) {
  grid-column: span 2;
}

.stream-img a img {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  aspect-ratio: 6/4;
}

.stream-txt:nth-child(4) {
  margin-top: 0.5em;
}

.stream-item-title {
  font-size: 1.125em;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

/*# sourceMappingURL=main.css.map */
@charset "UTF-8";
/*
=========================
Stream controls
=========================
SOURCE ONLY - no template links the compiled sasstest/stream-controls.css
directly. These rules ship inside frozen dated bundles per the site
convention (one main-<date>.css per page, declared in templateMapper):
main-20260710c = main-20231227a (the stream page's frozen base) + this
file's compile appended. (Superseded: main-20260706g pre author-filter;
main-20260708c pre privacy letter-badges.)

To iterate: edit here, `npx sass
stylesheets/stream-controls.scss:public/css/sasstest/stream-controls.css`,
append that output to the ORIGINAL frozen base (main-20231227a, not a
previous merge), save as a NEW main-<date><letter>.css, and repoint the
story-stream 1.3.1 entry in controllers/templateMapper.js. Never edit a
dated bundle in place.

Covers: the New-post composer additions (quiet meta row, photo panel,
previews strip), the inline edit/delete controls, the fresh-post
highlight, and the feed pagination / Load More row. Stream image
galleries use the .stream-img grid already frozen in main-20231227a.

Everything namespaced under .stream-* so it cannot restyle the page.
Mobile-first: base = phone (stacked, 44px touch targets).
*/
/*
=========================
=========================
Variables
=========================
=========================
*/
/* Variables related to the header and footer height */
/*
=========================
Author filter (shared)
=========================
The checkbox-dropdown panel used by BOTH the browse toolbar and the stream
header (decision log A1-A8 in AUTHOR-FILTER-NOTES.md). Imported by
browse-controls.scss and stream-controls.scss AFTER base/_variables.scss -
this partial uses those tokens and deliberately does not re-import them.

Markup contract (see the templates / stream_author_filter partial):
<details class="authorfilter"><summary>label</summary>
  <div class="authorfilter__panel"> checkbox rows + Clear/Apply </div>
</details>
The <details> element gives open/close without JS; the page JS adds
close-on-outside-click and Escape. Each context styles its own <summary>
trigger; everything below the panel line is shared.

Mobile-first: base = phone (44px touch targets), desktop slims down at
$nav-breakpoint like the rest of the toolbar controls.
*/
details.authorfilter {
  position: relative;
  display: flex;
  min-width: 0;
}

/* the trigger is a <summary>: kill the native disclosure marker */
.authorfilter summary {
  list-style: none;
  cursor: pointer;
}

.authorfilter summary::-webkit-details-marker {
  display: none;
}

.authorfilter summary::marker {
  content: "";
}

.authorfilter__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 15em;
  max-width: 20em;
  background: #fff;
  border: 1px solid #d8d8cb;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
  padding: 0.4em 0 0;
}

.authorfilter__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 16em;
  overflow-y: auto;
}
.authorfilter__list li {
  margin: 0;
  padding: 0;
}

.authorfilter__row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  min-height: 44px; /* touch target */
  padding: 0.35em 1em;
  margin: 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  color: #282823;
}
.authorfilter__row:hover {
  background: #F9F9F7;
}

.authorfilter__check {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  border: 1.5px solid #cdcdbd;
  border-radius: 4px;
  background: #fff;
  flex: 0 0 auto;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.authorfilter__check:checked {
  background: #7EB928;
  border-color: #7EB928;
}
.authorfilter__check:checked::after {
  content: "";
  width: 0.6em;
  height: 0.34em;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.authorfilter__check:focus-visible {
  outline: 2px solid rgb(0, 60, 255);
  outline-offset: 1px;
}

.authorfilter__name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.authorfilter__count {
  color: #7a7a6a;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

.authorfilter__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
  padding: 0.55em 0.75em;
  margin-top: 0.25em;
  border-top: 1px solid #e3e3da;
}

/* pin every anchor state - :link/:visited rules in the old bundles are pushy */
a.authorfilter__clear,
a.authorfilter__clear:link,
a.authorfilter__clear:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4em 0.6em;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #7a7a6a;
  text-decoration: none;
  cursor: pointer;
}

a.authorfilter__clear:hover {
  color: #282823;
}

.authorfilter__apply {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0.4em 1.4em;
  border: 1px solid #7EB928;
  border-radius: 6px;
  background: #7EB928;
  color: #fff;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.authorfilter__apply:hover {
  background: #679721;
  border-color: #679721;
}
.authorfilter__apply:focus-visible {
  outline: 2px solid rgb(0, 60, 255);
  outline-offset: 2px;
}

@media screen and (min-width: 760px) {
  .authorfilter__row {
    min-height: 0;
    padding: 0.45em 1em;
    font-size: 0.95rem;
  }
  a.authorfilter__clear,
  a.authorfilter__clear:link,
  a.authorfilter__clear:visited,
  .authorfilter__apply {
    min-height: 0;
  }
  .authorfilter__apply {
    padding: 0.45em 1.2em;
    font-size: 0.9rem;
  }
}
/*
=========================
Privacy letter-badges (shared)
=========================
One-letter circles showing each card/post's privacy tier: C I O G P, and
a red ✕ for private (P alone would clash with Public). Imported by
browse-controls.scss and stream-controls.scss AFTER base/_variables.scss -
this partial uses those tokens and deliberately does not re-import them.

Server-gated in the templates on the EFFECTIVE role (member+), so the
View-as lens hides them naturally (faithful preview). On top of that
they are hidden by default and only appear while the header's
👁︎ Visibility ▽ menu is open (the audit layer, split from Admin ▽ 6 July
2026): the toggle button carries aria-expanded, so a body:has() rule
does it in pure CSS - no JS, nothing for the 30-day asset cache to hold
stale. The letter legend lives inside that same menu
(header_authed_2_0.ejs .app-privacykey), so the key is on screen
exactly when the letters are. Browsers without :has() simply never show
the badges - acceptable for an admin nicety.

Markup contract (the templates compute the letter, title = full tier):
<span class="card-privacy card-privacy--<tier>" title="<tier>">I</span>
inside a position:relative card/post container.
*/
.card-privacy {
  position: absolute;
  /* top-RIGHT: cards lead with the title text at top-left */
  top: 0.6em;
  right: 0.6em;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background: rgba(26, 26, 21, 0.78);
  color: #fff;
  pointer-events: none;
}

body:has(.sub-nav-toggle[aria-controls=visibilityMenu][aria-expanded=true]) .card-privacy {
  display: flex;
}

/* Tier colours form a gradient, most open -> most closed (Ben, 6 July 2026):
   green -> yellow -> light orange -> deep orange -> pink -> red.
   Outer/inner are the two shades of one colour (orange). Light backgrounds
   (guest, outer) take dark text for contrast. Keep the legend dots in
   header_authed_2_0.ejs in step with these. */
.card-privacy--public {
  background: #7EB928;
}

.card-privacy--guest {
  background: #f0c22c;
  color: #1a1a15;
}

.card-privacy--outercircle {
  background: #f0922c;
  color: #1a1a15;
}

.card-privacy--innercircle {
  background: #d95f14;
}

.card-privacy--collective {
  background: #e26a9d;
}

.card-privacy--private {
  background: #c03b2f;
}

/* positioning context for the .card-privacy letter circle (the badge
   rules themselves live in common/_privacy-badge.scss). z-index: 0 makes
   each item a stacking context capping the badge's z-index: 2, so it
   can't paint over the site's fixed .app-footer as posts scroll behind. */
.stream-item {
  position: relative;
  z-index: 0;
}

/* our display:flex/inline-flex rules would otherwise defeat the [hidden]
   attribute the JS toggles - make hidden always win within stream controls */
.stream-post-form [hidden],
.stream-post-photos[hidden],
.stream-item [hidden],
.stream-pagination [hidden] {
  display: none !important;
}

/* ==================================================
Composer refinements
==================================================
The base bundle already styles .stream-post / .stream-post-form /
.stream-post-toggle (checkbox-driven, max-height transition). The frozen
open-state cap is 30em - too tight once image previews + the options row
exist, so raise it here. */
.stream-post-toggle:has(input:checked) + .stream-post-form {
  max-height: 100em;
}

.stream-post-form {
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
}
.stream-post-form textarea {
  width: 100%;
  min-height: 5em;
  font-family: inherit;
  font-size: 1em;
  padding: 0.5em;
  box-sizing: border-box;
}

/* accessible label for the unlabelled textarea */
.visuallyhidden-stream {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* the quiet affordance - shared voice for "add photos", "visible to: ...",
   "posting as: now" and the feed's auto-load preference */
.stream-post-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: none;
  border: none;
  padding: 0.5em 0;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.9em;
  color: #666;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.stream-post-quiet svg {
  flex: 0 0 auto;
  opacity: 0.7;
}
.stream-post-quiet:hover, .stream-post-quiet:focus-visible {
  color: rgb(13, 13, 13);
}
.stream-post-quiet:hover svg, .stream-post-quiet:focus-visible svg {
  opacity: 1;
}

/* one discrete row: photos / visibility / timing */
.stream-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.75em;
}
.stream-post-meta select,
.stream-post-meta input[type=datetime-local] {
  font-family: inherit;
  font-size: 0.9em;
  min-height: 44px;
  padding: 0.25em 0.5em;
}
.stream-post-meta .stream-post-privacy label {
  margin-right: 0.5em;
  font-size: 0.9em;
  color: #666;
}

/* photo panel, revealed on demand: small drop area + "or click to select" +
   the previews strip. On touch devices (no drag) only the previews remain -
   "add photos" opens the picker directly. */
.stream-post-photos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
}

.stream-post-dropmini {
  flex: 0 0 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  border: 2px dashed #ccc;
  border-radius: 0.5em;
  padding: 0 1em;
  color: #888;
  font-size: 0.85em;
  cursor: pointer;
}
.stream-post-dropmini:hover {
  border-color: #7eb928;
  color: #666;
}

.stream-post-select {
  min-height: 44px;
  padding: 0 1em;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  background: #fafafa;
  font-family: inherit;
  font-size: 0.85em;
  color: #444;
  cursor: pointer;
}
.stream-post-select:hover {
  border-color: #7eb928;
  color: rgb(13, 13, 13);
}

@media (hover: none) {
  .stream-post-dropmini,
  .stream-post-select {
    display: none;
  }
}
/* compact attached-photo strip (dropzone previewsContainer) - visually rhymes
   with the condensed gallery thumbs in the feed */
.stream-post-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.stream-post-previews .dz-preview {
  margin: 0;
  min-height: 72px;
  width: 72px;
}
.stream-post-previews .dz-preview .dz-image {
  width: 72px;
  height: 72px;
  border-radius: 0.5em;
}
.stream-post-previews .dz-preview .dz-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stream-post-previews .dz-preview .dz-details,
.stream-post-previews .dz-preview .dz-success-mark,
.stream-post-previews .dz-preview .dz-error-mark {
  display: none;
}
.stream-post-previews .dz-preview .dz-progress {
  height: 8px;
  top: 60%;
}
.stream-post-previews .dz-preview .dz-remove {
  font-size: 0.75em;
}

/* dropzone drag-over feedback on the whole composer */
.stream-post-form.dz-drag-hover {
  outline: 2px dashed #7eb928;
  outline-offset: 6px;
}

.stream-post-error {
  margin: 0.5em 0 0;
  font-size: 0.9em;
  color: #b00020;
}

/* ==================================================
Image display
==================================================
Stream galleries use the .stream-img grid already frozen in the base bundle
as their first impression (Ben, 5 July - the 6:4 tile crops keep even
4-photo posts compact). Clicking any image opens lightgallery. No extra
rules needed here. */
/* ==================================================
Edit / delete controls (author or admin, JS-revealed)
================================================== */
.stream-item-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5em;
  margin-top: -0.5em;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
}
.stream-item-actions .stream-post-quiet {
  font-size: 0.8em;
  min-height: 34px;
  padding: 0.25em 0;
}

.stream-post-quiet--danger:hover,
.stream-post-quiet--danger:focus-visible {
  color: #b00020;
}

.stream-item-confirm {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: 0.8em;
  color: #666;
}

.stream-item-editform {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
}
.stream-item-editform textarea {
  width: 100%;
  min-height: 5em;
  font-family: inherit;
  font-size: 1em;
  padding: 0.5em;
  box-sizing: border-box;
}

.stream-item-editform-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
}
.stream-item-editform-meta input[type=datetime-local],
.stream-item-editform-meta select {
  font-family: inherit;
  font-size: 0.9em;
  min-height: 44px;
  padding: 0.25em 0.5em;
}

.stream-item-editform-controls {
  display: flex;
  align-items: center;
  gap: 1em;
}

/* deletion: fade the card away before removal */
.stream-item--removing {
  transition: opacity 0.4s ease-out;
  opacity: 0;
}

/* gentle arrival for a just-published post */
.stream-item--fresh {
  animation: stream-item-arrive 1.6s ease-out 1;
}

@keyframes stream-item-arrive {
  0% {
    background-color: #f3f9e8;
  }
  100% {
    background-color: #fff;
  }
}
/* ==================================================
Feed pagination / Load More / auto-load
==================================================
Sits as the last item in the .stream-layout grid, same column as the feed
items. No-JS sees the fallback prev/next links; stream-controls.js swaps in
the Load More button + auto-load toggle. */
.stream-pagination {
  grid-column: 2/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding: 1.5em 1em 2.5em;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
}

.stream-pagination-fallback {
  display: flex;
  align-items: center;
  gap: 1em;
}
.stream-pagination-fallback a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5em;
}
.stream-pagination-fallback span {
  color: #666;
}

.stream-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
}
.stream-loadmore a.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ==================================================
Feed pagination / Load More / auto-load
==================================================
Sits as the last item in the .stream-layout grid, same column as the feed
items. No-JS sees the fallback prev/next links; stream-controls.js swaps in
the Load More button + auto-load toggle. */
.stream-pagination {
  grid-column: 2/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding: 1.5em 1em 2.5em;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
}

.stream-pagination-fallback {
  display: flex;
  align-items: center;
  gap: 1em;
}
.stream-pagination-fallback a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5em;
}
.stream-pagination-fallback span {
  color: #666;
}

.stream-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
}
.stream-loadmore a.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* feed auto-load preference: a discrete icon beside the first feed item, in
   the layout's right-margin column (costs zero feed height, can't retreat as
   pages load). On phones the margin column collapses, so the icon overlays
   the first card's top-right corner instead. */
.stream-feed-meta {
  grid-column: 3/4;
  align-self: start;
  justify-self: start;
  padding: 1.5em 0 0 0.6em;
}

.stream-autoload-icon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0.4em;
  color: #999;
  cursor: pointer;
}
.stream-autoload-icon:hover, .stream-autoload-icon:focus-visible {
  color: rgb(13, 13, 13);
}

@media (max-width: 767px) {
  .stream-feed-meta {
    position: relative;
    width: 0;
    padding: 0;
    overflow: visible;
    justify-self: end;
  }
  .stream-autoload-icon {
    position: absolute;
    top: 0.9em;
    right: 0.3em;
    min-width: 44px;
    min-height: 44px;
    justify-content: flex-end;
    align-items: flex-start;
  }
}
/* ==================================================
Composer header: NEW POST + author filter
==================================================
One row: NEW POST left, "Showing posts by ..." right (decision A6/stream v2
mock). Source order inside .stream-post is filter THEN toggle - the frozen
.stream-post-toggle:has(input:checked) + .stream-post-form rule needs the
toggle to stay the form's immediate previous sibling - so flex `order`
produces the visual arrangement instead.
*/
.stream-post {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1em;
}

.stream-post-toggle {
  order: 1;
}

.stream-authorfilter {
  order: 2;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0 0 2em;
  position: relative;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
  font-size: 0.95rem;
  color: #7a7a6a;
}

.stream-post-form {
  order: 3;
  flex: 1 1 100%;
}

.stream-authorfilter__label {
  white-space: nowrap;
}

/* the trigger: select-dressed pill on mobile, quiet ghost on desktop -
   mirrors how the browse toolbar's selects behave */
.stream-authorfilter summary.stream-authorfilter__summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target */
  padding: 0.5em 2.1em 0.5em 0.75em;
  border: 1px solid #d8d8cb;
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23807f76' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  background-size: 10px 6px;
  color: #282823;
  font-family: "Titillium Web", "Source Sans 3", "Source Sans Pro", -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease;
}
.stream-authorfilter summary.stream-authorfilter__summary:hover {
  border-color: #7eb928;
}
.stream-authorfilter summary.stream-authorfilter__summary:focus-visible {
  outline: 2px solid rgb(0, 60, 255);
  outline-offset: 1px;
}

/* a filter that's engaged shows quietly in brand green */
.stream-authorfilter summary.stream-authorfilter__summary.is-active {
  color: #567e1b;
}

/* viewing tiers get the filter without the composer: a slim card */
.stream-post--filteronly {
  padding: 1.25em 2em;
  justify-content: flex-end;
}
.stream-post--filteronly .stream-authorfilter {
  margin: 0;
}

@media screen and (min-width: 760px) {
  /* hairline section divider between NEW POST and the filter (stream v2) */
  .stream-authorfilter {
    border-left: 1px solid #e3e3da;
    padding-left: 1.25em;
  }
  .stream-authorfilter summary.stream-authorfilter__summary {
    min-height: 0;
    border-color: transparent;
    background-color: transparent;
    font-size: 0.95rem;
    padding: 0.35em 1.6em 0.35em 0.55em;
    background-position: right 0.45em center;
    border-radius: 6px;
  }
  .stream-authorfilter summary.stream-authorfilter__summary:hover, .stream-authorfilter summary.stream-authorfilter__summary:focus-visible {
    background-color: #eeeee8;
    border-color: transparent;
  }
}