blessfrey-bottle/src/static/css/char.css

.content-grid { 
    display: grid;
    /*grid-template-columns: 16ch 50ch 1fr;*/
    grid-template-columns: 25% 60% 1fr;
    grid-template-rows: 5em repeat(2, auto);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    color: white;
}

.title { 
    grid-area: 1 / 1 / 2 / 3;
    padding-left: 5ch;
}
.ocs-nav { grid-area: 2 / 1 / 4 / 2;
    font-size: 0.005em;
}
.profile { 
    grid-area: 2 / 2 / 3 / 3;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    grid-column-gap: 0px;
    grid-row-gap: 1.5em; 
    padding-bottom: 1.5em; 
    word-wrap: break-word;
}
.portrait { 
    grid-area: 1 / 3 / 3 / 4;
}

.gallery-div { grid-area: 3 / 2 / 4 / 4; }

.name { grid-area: 1 / 1 / 2 / 2; }
.label { grid-area: 2 / 1 / 3 / 2; }
.basics { grid-area: 3 / 1 / 4 / 2; }
.story { grid-area: 4 / 1 / 5 / 2; }
.desc { grid-area: 5 / 1 / 6 / 2; } 

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, 200px);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border: 2px solid #C0AAC0;
}

.gallery img {
    height: 200px;
    width: 200px;
    border-radius: 5%;
}

.galitem {
  position: relative;
    height: 200px;
    width: 200px;
}

.subtitle {
  color: white;
    width: 200px;
  position: absolute;
  background: rgba(0,0,0,0.7);
  text-align: center;
    overflow: hidden;
    bottom: 0em;
}