#intro { color: rgb(57, 34, 18); }

body {
  margin-left: 20px;
  margin-top: 20px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: rgb(243, 234, 202);

  display: grid;
  grid-template-columns: minmax(100px, 200px) 1fr;
  grid-template-areas:
    "intro text"
    "cats  cats";
  gap: 2rem;
  font-family:"chevin-pro", sans-serif;
}

#intro { grid-area: intro; }
#dummy { grid-area: text; }
#cats  { grid-area: cats; }

h1, h2, h3, p { font-family: "chevin-pro", sans-serif; }
h1 { font-weight: 800; font-style: normal; padding-top: 50px; line-height: 0.1; }
h2 { font-weight: 700; font-style: italic; line-height: 0.8; margin: 0.25rem 0; }
h3 { font-weight: 700; font-style: italic; line-height: 1.1; margin: 0.25rem 0; }
p { font-weight: 300; }

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto; 
}

a,
a:visited {
  color: inherit;            
  font: inherit;       
  font-family:inherit;    
}


#intro img {
  border: 4px solid rgb(255, 255, 248);
  border-bottom-width: 50px;
  display: block;
  margin-top: 0.75rem;
  max-width: 100%;   
  height: auto;
}

/* Right-column text */
.text p {
  max-width: 65ch;
  margin: 0;
  text-align: left
  padding-left:2px
}

#cats img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}


@media (max-width: 800px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "text"
      "cats";
  }
}

#showcase img{ width:100%;}