/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}


body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:root {
   /* --small: 25em; */
   --fs-body: 1.2em;
   --fs-title: 1.5em;
   --fs-medium: 1em;
   --fs-small: 0.8em;
   --horizontal-medium: 5em;
   --horizontal-large: 8em;

   @media (min-width: 25em) {
      --fs-title: 2em;
      --fs-body: 1.3em;
      /* --fs-medium: 1.6em; */
   }

   @media (min-width: 80em) {
      --fs-title: 3em;
      --fs-body: 1.5em;
      /* --fs-medium: 2em; */
   }
}


body {
   font-family: 'Times New Roman', Times, serif;
   font-size: var(--fs-body);
   line-height: 1.05;
   padding: 0.5em;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   background-color: #f7fbf4;
}

.site-claim,
.site-title,
.site-subtitle {
   font-size: var(--fs-title);
   overflow-wrap: break-word;
   hyphens: auto;
   font-weight: 700;

   &:not(:last-child) {
      margin-bottom: 1em;
   }

   /* @media (min-width: 25em) {
      font-size: 3em;
   } */
}

.site-claim {
   grid-column: 2 / end;
}

.site-title {
   /* @media (min-width: 25em) { */
      grid-column: 1 / end ;
   /* } */
}

.site-subtitle-wrapper { 
   grid-column: 2 / end;
   margin-bottom: var(--horizontal-medium);
}

/* .content {
   max-width: 70em;
} */

.intro,
.item,
.outro {
   max-width: 60em;
   align-self: center;
}

/* .intro, */
.item,
.outro {
   display: grid;
   /* grid-template-rows: auto; */

   @media (min-width: 25em) {
      grid-template-columns: 20% auto;
      grid-gap: 0 2rem;
   }
}

.content {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   width: 100%;
}

.item {
   margin-bottom: var(--horizontal-medium);

   &:last-of-type {
      margin-bottom: var(--horizontal-large);
   }
}

.intro {
   grid-template-columns: 20% auto;
   grid-template-rows: minmax(0, auto) minmax(0, auto) 1fr;
   min-height: 70vh;
}

.item-image {
   display: grid; 
   grid-template-columns: 20% 80%;

   @media (min-width: 25em) {
      grid-template-columns: 1fr;
      /* justify-self: flex-end; */
   }
}

.item-img {
   grid-column: 2 / end; 
   margin-bottom: 1em;
   width: 100%;
   max-width: 15em;


   > img {
      width: 100%;
   }

   #img-bc {
      width: 90%;
   }

   #img-kw {
      width: 70%;
   }

   #img-cf {
      /* width: 140%; */
   }

 @media (min-width: 25em) { 
      grid-column: 1 / 2; 
      margin-bottom: 0;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
   } 
}

.item-title {
   font-weight: 700;
}

.item-text {
   margin-bottom: 1.05em;
   text-align: justify;
}

.outro {
   grid-template-columns: 20% 1fr;
}

.outro-header-wrapper {
   margin-bottom: 1em;
   grid-column: 1 / end;
}

.outro-header {
   /* font-size: var(--fs-title); */
   max-width: 13em;
}

.outro-content {
   grid-column: 1 / end;
}

.outro-header,
.outro-text {
   font-size: var(--fs-medium);
}

.outro-text {
   grid-column: 1 / end;
   margin-bottom: 1em;
   text-align:justify;
}

.outro-img {
   grid-column: 2 / end;

   > img {
      /* max-width: 8em; */
      width: 100%;
   }
}

.caption {
   font-size: var(--fs-small);
}

.footer {
   display: flex;
   justify-content: space-between;
   grid-column: 1 / end;
   margin-top: var(--horizontal-medium);
}

.footer-link {
   font-size: var(--fs-small);
}

a,
.footer-link,
.item-link {
      color: black;
}