/* V3 is the visual source of truth for the Lesson library. */
.v3-exact-card-title{
  font-weight:500 !important;
  font-size:22px;
  line-height:1.25;
  letter-spacing:0;
}

.v3-exact-library-card{
  border:1px solid #d4d4d4;
  border-radius:8px;
  box-shadow:none;
}

.v3-exact-card-art{
  background:var(--card-tone) !important;
  border:0 !important;
  box-shadow:none !important;
}

.v3-exact-grade-toolbar{
  max-width:1160px;
  margin:18px 0 28px;
  font-size:19px;
  line-height:1.55;
  color:#303238;
}

.v3-exact-grade-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px 30px;
  max-width:1160px;
}

.v3-exact-grade-card{
  border:1px solid #d4d4d4;
  border-radius:8px;
  box-shadow:none;
  overflow:hidden;
}

.v3-exact-grade-card.selected{
  outline:none;
  box-shadow:0 0 0 2px #7754c9;
}

.v3-exact-grade-art{
  height:220px;
  position:relative;
  overflow:hidden;
  display:block;
}

.v3-exact-grade-number{
  position:absolute;
  left:28px;
  top:50%;
  transform:translateY(-52%);
  z-index:2;
  color:#fff;
  font-size:96px;
  font-weight:500;
  line-height:.9;
  letter-spacing:-5px;
  white-space:nowrap;
}

.v3-exact-grade-character{
  position:absolute;
  right:12px;
  bottom:2px;
  width:48%;
  height:86%;
  object-fit:contain;
  object-position:right bottom;
}

.v3-exact-grade-character.secondary{
  right:auto;
  left:-4px;
  width:34%;
  height:70%;
}

.v3-exact-grade-card.grade-blue .v3-exact-grade-character{width:45%;height:84%;}
.v3-exact-grade-card.grade-green .v3-exact-grade-character{width:46%;height:88%;}
.v3-exact-grade-card.grade-orange .v3-exact-grade-character{width:42%;height:82%;}
.v3-exact-grade-card.grade-lilac .v3-exact-grade-character{width:40%;height:78%;}

.grade-yellow .v3-exact-grade-art{background:#fdd662;}
.grade-blue .v3-exact-grade-art{background:#a5d7d5;}
.grade-green .v3-exact-grade-art{background:#97cb9d;}
.grade-orange .v3-exact-grade-art{background:#f3a275;}
.grade-lilac .v3-exact-grade-art{background:#9da5b2;}

.v3-exact-grade-title{
  padding:17px 20px 19px;
  color:#292d32;
  font-size:22px;
  line-height:1.2;
  font-weight:500 !important;
  text-align:left;
}

.v3-exact-context strong,
.v3-exact-strength-context strong,
.v3-exact-breadcrumb strong{
  font-weight:500;
}

@media(max-width:1000px){
  .v3-exact-grade-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media(max-width:650px){
  .v3-exact-grade-grid{grid-template-columns:1fr;}
  .v3-exact-grade-art{height:190px;}
  .v3-exact-grade-number{font-size:78px;left:22px;}
}