/*
    Used for the quote box, but can be used elsewhere.

    Defines a two-column layout.
    The left olumn must have two elements;
    The right column will be vertically centred to the gridline itself separating the left column.
*/
.QuoteBox  {
    display: grid;

    /* Two columns: auto width for left, remaining space for right */
    grid-template-columns: auto  1fr;
    
    grid-template-rows:    auto auto; 
    
    /* padding inbetween; reducing with two-row layout for name and role */
    /*gap: 1em; */
    column-gap: 1em;
}
 

/* Manually places elemenets - is this needed? */
.QuoteLeftTop {
    grid-column: 1; 
    grid-row:    1; 
}
  
.QuoteLeftBottom {
    grid-column: 1; 
    grid-row:    2; 
}
 


.QuoteRight {
    grid-column: 2; 
    grid-row:    2;
  
    /* Align the top edge of this item with the start of its grid row (the line below left-item-1) */
    align-self: start;
  
    /* Shift the item upwards by half of its own height */
    /* This centers it vertically on the grid line between row 1 and row 2 */
    transform: translateY(-50%);
  
    /* Ensure transform calculation includes padding and border */
    box-sizing: border-box;
}

.Signature {
    /* Use EB Garamond, fall back to Garamond, then serif */
    font-family: 'EB Garamond', 'Garamond', serif;
    font-size: 24px;
}


/* https://stackoverflow.com/a/34708570/4235856 */
blockquote {
    position: relative;
    /*margin: 0em;
    padding: 0em;*/
    margin: 0em;
    padding: 0em 1em 0em 1em;
}
blockquote:before {
    position: absolute;
    font-size: 2.5em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
}
blockquote:after {
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size: 2.5em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
}