Main.css

.mw-body h1, .mw-body-content h1, .mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 {

   font-family: 'PT Serif', 'Palatino', 'Georgia', serif;

}

.mw-page-title-main {

 font-family: Philosopher,sans-serif

}

.tile {

   background: #f9f3eb;
   border: 1px solid #cabe9b;
   padding: 1.5em 2em 1em;
   max-width: 40em;

   h2 {
   	font-size: 1.4em;
       font-weight: bold;
       border: none;
       margin: 0 0 .4em;

}

   // reduce spacing when byline and heading appear together
   // (which should be the only way bylines appear)
   .byline + h2 {
       margin-top: -0.5em;
   }

   &.dark {
       color: white;
       background: shuttle-gray;
       border: none;

       h2 {
           color: white;
       }

       a {
           color: #ccc;
       }

       .byline {
           color: #FFFFFFCC;
       }

   }

}

.mainpage-contents { grid-area: content; grid-template-columns: repeat(6, 1fr);

   .tile-halves {
       flex: 1;
   }

   .tile-top {
       position: relative; // needed for ribbon
       max-width: 200px;
   }

   h2 {
       margin: 0;
       padding: 0;
   }

   .tile-bottom.link-button a {
   	padding: 0.75em 0.2em; // prevent grid gap misalignment
   }

}

.tile-row { display: flex; flex-flow: row wrap; margin-bottom: 1em; }

.tile-halves { display: flex; flex-flow: row wrap; border: 1px solid #cabe9b; background: #f9f3eb;

   h2 {
       font-size: 1.4em;
       font-weight: bold;
       border: none;
       margin: 0 0 .4em;
   }

   .byline + h2 {
       margin-top: -0.5em;
   }

}

// goes inside .tile-halves .tile-top { width: 100%; padding: 1.3rem 1.5rem .6rem;

.tile-image { display: flex; align-items: center; // vertically center images background-color: #FFFFFFCC; overflow: hidden; padding: 0; height: 13vw; max-height: 12em; transition: .4s ease-out;

.tile-halves:hover & img { transform: scale(1.1); transition: .5s ease-out; }

       span {
           width: 100%;
       }

       img {
           width: 100%;
           object-fit: cover;
           max-height: 200px;
           transition: .4s ease-out;
       }
   }

}

.tile-top.tile-image {

   display: flex;
   align-items: center;
   overflow: hidden;
   padding: 0;
   height: 13vw;
   max-height: 12em;
   transition: 0.4s ease-out;

}

// goes inside .tile-halves .tile-bottom {

   background: #f9f3eb;
   border-top: 1px solid #cabe9b;
   width: 100%;
   padding: 1rem 1.5rem .6rem;

   &.link-button {
       align-self: flex-end; // have link stick to the bottom
       padding: 0;

       a {
           display: block;
           text-align: center;
           padding: .75em 1.5em .8em;
           text-decoration: none;
       }

   }

   // must be used in conjunction with .link-button
   &.read-more {
       background: #f5e9db;
       transition: .3s ease-out;

       a {
           color: #FFFFFFCC;
           font-weight: bold;
           text-align: right;
       }

       &:hover {
           background: #0C0C0C;

           .arrow {
               transform: translateX(50%);
           }

       }

       .arrow {
           margin-left: .4em;
           transition: .3s ease-out;
       }

   }

}