@import 'main.css';

#flow-main > div {
    -webkit-flow-into: flow-pictures;
            flow-into: flow-pictures;
}

.main .pictures {
    -webkit-flow-from: flow-pictures;
            flow-from: flow-pictures;
}

#flow-main .text {
  -webkit-flow-into: flow-text;
          flow-into: flow-text;
}

.main .text {
  -webkit-flow-from: flow-text;
          flow-from: flow-text;
}

@font-face {
   font-family: 'PxGrotesk';
   font-weight: normal;
   font-style: normal;
   src: url('fonts/PxGrotesk/PxGroteskRegular.ttf') format('truetype');

}

@font-face {
   font-family: 'Nocturne serif';
   font-weight: normal;
   font-style: normal;
   src: url('fonts/NocturneSerif/NocturneSerif-Regular.ttf') format('truetype');

}
.page {
    padding: 5mm;
}

.main {
    height: calc(100% - 10mm);
    display: flex;
    flex-direction: row;
}

.main .text {
  flex: 1 0;
  padding: 0 2mm;
}

.main .pictures {
  flex: 1 0;
}

.main .pictures cssregion {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

body {
	font-family: "PxGrotesk";
	font-size: 1em;
}
p {
	font-size: 1.1em;
}
h1:nth-of-type(n+2) {
    /*break-before: always; */
    /**
        `always` doesn't work in native, infinite loop in polyfil
        `page` works in native, doesn't work in the polyfill
        `region` works on native, causes an infinite loop in polyfill
    */
    -webkit-region-break-before: always;grid/regions/style.css
.pictures *,
.text * {
  block-size: initial !important;
  inline-size: initial !important;
}

.pictures div, .pictures div img {
  width: 100%;
  max-width: 100%;
  height: initial;
}

.pictures div {
  display: inline-block;
  max-width: calc(50% - 4mm);
  width: calc(50% - 4mm);
  vertical-align: top;
  margin: 2mm;
}


#stories {
  display: none;

}

.main > div {
    margin-right: 13px;
}
h1 {

	font-family: "Nocturne serif";
}
dd, dt, dl {

	margin: 0;
	padding: 0;	
}