:root {
   --artist-column-gap: 40px;
}

section.intro article .title {
   display: block;
   height: 80px;
}
section.intro article .title > h2,
section.artist .title > h2 {
   font-weight: 300;
   display: block;
   margin: 0;
   padding: 0;
   font-size: 37px;
   line-height: 42px;
   /* font-weight: lighter; */
}

section.intro article:lang(en) .title > h2 {
   font-weight: 100 !important;
}

article {
   font-size: 14px;
   line-height: 24px;
}
article > label {
   padding-bottom: 10px;
   font-size: 18px;
   line-height: 28px;
   display: block;
   font-weight: 600;
}
article p {
   margin-top: 0;
}

article:lang(en) {
   text-align: justify;
}

#main-context > .inner {
   max-width: var(--context-max-width);
   margin: 0 auto;
   padding: 30px 0;
}

section.intro {
   display: grid;
   grid-template-areas: "mural-arts-en mural-arts-tc"
      "venue-en venue-tc"
      "date-en date-tc"
      "others-en others-tc";
   column-gap: 50px;
   row-gap: 15px;

   padding-bottom: 30px;
   margin-bottom: 50px;
   position: relative;
}

section.intro::after {
   content: '';
   width: 100%;
   height: 1px;
   display: block;
   position: absolute;
   background-color: var(--hover-color);
   bottom: 0;
   left: 0;
}

section.intro article.mural-arts:lang(en) {
   grid-area: mural-arts-en;
}
section.intro article.mural-arts:lang(tc) {
   grid-area: mural-arts-tc;
}
section.intro article.venue:lang(en) {
   grid-area: venue-en;
}
section.intro article.venue:lang(tc) {
   grid-area: venue-tc;
}
section.intro article.date:lang(en) {
   grid-area: date-en;
}
section.intro article.date:lang(tc) {
   grid-area: date-tc;
}
section.intro article.others:lang(en) {
   grid-area: others-en;
}
section.intro article.others:lang(tc) {
   grid-area: others-tc;
}


section.artist {
   width: 100%;
   display: grid;
   grid-template-areas: "photo photo photo photo photo photo"
      "concept-en concept-en concept-en concept-tc concept-tc concept-tc"
      "avatar avatar name name name name"
      "avatar avatar bio-en bio-en bio-tc bio-tc";
   column-gap: var(--artist-column-gap);
   row-gap: 20px;
   position: relative;
   padding-bottom: 40px;
   margin-bottom: 40px;
}

section.artist::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 1px;
   display: block;
   background-color: rgba(0,205,55, 0.4);
   bottom: 0;
   left: 0;
}
section.artist:last-child {
   margin-bottom: 0;
   padding-bottom: 10px;
}
section.artist:last-child::after {
   display: none;
}

section.artist > .photo {
   grid-area: photo;
}
section.artist > .concept:lang(en) {
   grid-area: concept-en;
}
section.artist > .concept:lang(tc) {
   grid-area: concept-tc;
}
section.artist > .avatar {
   grid-area: avatar;
}
section.artist > .name {
   grid-area: name;
}
section.artist > .bio:lang(en) {
   grid-area: bio-en;
}
section.artist > .bio:lang(tc) {
   grid-area: bio-tc;
}

section.artist .photo > .display:not(.custom) {
   width: var(--context-max-width);
   height: calc(var(--context-max-width) * var(--ratio));
}

section.artist .photo > .display.custom {
   height: 94vh;
   width: calc(94vh / var(--ratio));
   margin: 0 auto;
}

section.artist .avatar > .display {
   display: table-cell;
   --this-width: calc((var(--context-max-width) - var(--artist-column-gap) - var(--artist-column-gap)) / 3);
   width: var(--this-width);
   height: calc(var(--this-width) * var(--ratio));
}