.yt-account-learning {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  padding: 30px;
  border: 1px solid var(--yt-line, #ead8c8);
  border-radius: 22px;
  background: linear-gradient(125deg, #fffaf2, #fff 58%, #f9eee3);
  box-shadow: 0 13px 32px rgba(55, 37, 25, .08);
}

.yt-account-learning__intro span,
.yt-account-learning > div:first-child > span {
  color: var(--yt-orange, #df7424);
  font-size: 11px;
  letter-spacing: .16em;
}

.yt-account-learning__intro h2,
.yt-account-learning > div:first-child > h2 {
  margin: 7px 0 6px;
  font-size: 28px;
}

.yt-account-learning__intro p,
.yt-account-learning > div:first-child > p {
  margin: 0;
  color: var(--yt-muted, #806f65);
}

.yt-account-learning__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.yt-account-learning__metrics article {
  display: grid;
  gap: 5px;
  padding: 15px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .82);
  text-align: center;
}

.yt-account-learning__metrics small {
  color: var(--yt-muted, #806f65);
}

.yt-account-learning__metrics strong {
  font-family: serif;
  font-size: 28px;
}

.yt-account-learning__actions {
  display: grid;
  gap: 9px;
  min-width: 150px;
}

.yt-account-learning__actions a,
.yt-account-learning > a {
  padding: 11px 16px;
  border: 1px solid #d9c4b1;
  border-radius: 10px;
  color: var(--yt-ink, #3f2a20);
  background: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
}

.yt-account-learning__actions a.is-primary,
.yt-account-learning > a {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(105deg, var(--yt-red, #bd3324), var(--yt-orange, #df7424));
}

@media (max-width: 900px) {
  .yt-account-learning {
    grid-template-columns: 1fr;
  }

  .yt-account-learning__actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .yt-account-learning__metrics,
  .yt-account-learning__actions {
    grid-template-columns: 1fr;
  }
}