
.oc_box_1 {
  grid-column: span 4;
  grid-row: span 7;
  padding: 1dvh;
  box-sizing: border-box;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  margin: 0.5dvh;
  font-size: 2dvh;
}

.oc_box_2 {
  grid-column: 2 / span 18;
  grid-row: 2 / span 3;
  padding: 2dvh;
  box-sizing: border-box;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  margin: 0.5dvh;
  font-size: 2dvh;
}

.oc_icon {
  background-color: #464143;
  border-top: 0.5dvh solid #191819;
  border-left: 0.5dvh solid #191819;
  border-right: 0.5dvh solid #655E5E;
  border-bottom: 0.5dvh solid #655E5E;
  object-fit: cover;
  background-color: black;
  width: 100%;
}




/* ------------------------------------ */

.box_oc_0a /* overview */ {
  grid-column: span 4;
  grid-row: span 5;
  padding: 2dvh;
  box-sizing: border-box;
  background-color: #464143;
  border-top: 0.5dvh solid #655E5E;
  border-left: 0.5dvh solid #655E5E;
  border-right: 0.5dvh solid #191819;
  border-bottom: 0.5dvh solid #191819;
  margin: 0.5dvh;
}

.round {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  object-fit: cover;
  background-color: black;
}

.oc_name {
  font-size: 2dvh;
  margin: 0;
  line-height: 3dvh;
}



/* ------------------------------------ */

.box_oc_1a /* banner */ {
  grid-column: 1 / span 20;
  grid-row: 1 / span 4;
  border-top: 0.5dvh solid #464143;
  border-left: 0.5dvh solid #464143;
  border-right: 0.5dvh solid #000;
  border-bottom: 0.5dvh solid #000;
  background-color: #191819;
  padding: 0.5dvh;
  box-sizing: border-box;
}

.banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box_oc_2a /* traits */ {
  grid-column: 1 / span 4;
  grid-row: 5 / span 12;
  border-top: 0.5dvh solid #464143;
  border-left: 0.5dvh solid #464143;
  border-right: 0.5dvh solid #000;
  border-bottom: 0.5dvh solid #000;
  background-color: #191819;
  padding: 1dvh;
  box-sizing: border-box;
  font-size: 1.7dvh;
}

.box_oc_3a /* text */ {
  grid-column: 5 / span 10;
  grid-row: 5 / span 12;
  border-top: 0.5dvh solid #464143;
  border-left: 0.5dvh solid #464143;
  border-right: 0.5dvh solid #000;
  border-bottom: 0.5dvh solid #000;
  background-color: #191819;
  padding: 1dvh;
  box-sizing: border-box;
  font-size: 2dvh;
}

.box_oc_4a /* img */ {
  grid-column: 15 / span 6;
  grid-row: 5 / span 12;
  border-top: 0.5dvh solid #464143;
  border-left: 0.5dvh solid #464143;
  border-right: 0.5dvh solid #000;
  border-bottom: 0.5dvh solid #000;
  background-color: #191819;
  padding: 0.5dvh;
  box-sizing: border-box;
}

.box_oc_5a /* albums */ {
  grid-column: 1 / span 20;
  grid-row: 17 / span 4;
  background-color: #191819;
  
  border-top: 0.5dvh solid #464143;
  border-left: 0.5dvh solid #464143;
  border-right: 0.5dvh solid #000;
  border-bottom: 0.5dvh solid #000;
  display: flex;
  align-items: center;
  padding: 1dvh;
}

.album {
  background-color: red;
  width: 100%;
  height: 100%;
  border-top: 0.5dvh solid #000;
  border-left: 0.5dvh solid #000;
  border-right: 0.5dvh solid #464143;
  border-bottom: 0.5dvh solid #464143;
  margin: 0.2dvh;
}

.albumcover {
  box-sizing: border-box;
  width: 100%;
  object-fit: fill;
}

.bigboxjustified {
  text-align: justify;
}

.bigboxname {
  margin: 0;
}

.bigboxtraits {
  margin: 0;
  font-size: 1.7dvh;
}

.quote {
  color: inherit;
  font-size: inherit;
}