:root {
   --margin-full-width: var(--space-0);

   /** SPACING
    *  root font-size is set to 10px
    */

   --space-0: 0;
}

/** TYPOGRAPHY
 *  adjusted h2 spacing for optical centering
 */

 h2 {
   padding: .2em .4em .3em .4em;
   font-family: 'Repro', sans-serif;
   font-weight: normal;
}


/* Convenings Hero */
.convenings-message {
   display: none;
}

/* Civic Initiatives Hero */
.civic-initiatives-hero {
   position: relative;
   overflow: hidden;
   /* height: calc(100vh - 16rem);
   height: calc(100svh - 16rem); */
   height: 100%;
   border: 2rem solid var(--colorYellow);
   z-index: 1;
}

.civic-initiatives-hero.civic-initiatives-message {
   height: auto;
}

.civic-initiatives-hero.no-border {
   padding: 0;
}

.civic-initiatives-hero .text-wrapper {
   position: absolute;
   z-index: 2;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: transparent;
   padding: 0;
   transition: background-color 150ms ease;
}

.civic-initiatives-hero .category-wrapper {
   position: absolute;
   z-index: 2;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: baseline;
   padding: 4rem 0 0;
   background: transparent;
   }

.civic-initiatives-hero .category-wrapper .big-category {
   font-size: var(--size-20);
   letter-spacing: var(--letter-spacing-sm);
   text-transform: uppercase;
   padding: 0.125rem 0.5rem;
   border: 1px solid currentColor;
   margin: 0 0 8rem;
   color: var(--colorYellow);
}

.civic-initiatives-message {
   transform: translateY(2rem);
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   flex: 1;
   justify-content: center;
} */

.civic-initiatives-hero img h1 {
   line-height: var(--line-height-sm);
   padding: 0;
   margin: 4rem 0 0;
   max-width: 18ch;
   color: var(--colorYellow);
}

.civic-initiatives-hero h1 {
   font-size: var(--size-90);
   line-height: var(--line-height-sm);
   letter-spacing: var(--letter-spacing-sm);
   max-width: 30ch;
   padding: 0;
   color: var(--colorYellow);
}

 .civic-initiatives-hero .civic-initiatives-hero-link:hover h1 {
   color: black;
}

.civic-initiatives-hero .bkg-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
}

.civic-initiatives-hero-border {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 2rem solid var(--colorYellow);
   z-index: 1;
}

.no-border .civic-initiatives-hero-border {
   border-color: transparent;
}