.template-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.template-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px;
  cursor: pointer;
  background: #faf9f6;
  border: 2px solid var(--ink);
}

.template-card input {
  width: auto;
  margin: 3px 0 0;
}

.template-card span {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.template-card strong {
  font-size: 15px;
}

.template-card i {
  color: #6d6961;
  font-size: 12px;
  font-style: normal;
}

.template-card.selected {
  background: #fff1ef;
  border-color: var(--red);
  box-shadow: 4px 4px 0 var(--ink);
}

.template-card.education.selected {
  background: #fff8df;
  border-color: #d8a400;
}

.template-card.bilingual.selected {
  background: #eef5ff;
  border-color: #1769d2;
}

.template-card.dialogue.selected {
  background: #eaf8f2;
  border-color: #4ea88a;
}

.purple-demo::after {
  display: none;
}

.purple-demo .demo-text {
  z-index: 2;
  align-items: flex-start;
  padding: 35px;
  text-shadow: none;
}

.purple-demo .demo-text strong {
  font-size: 58px;
  line-height: .96;
}

.purple-demo .demo-text .red {
  color: #f9dd4a;
  font-size: 82px;
  line-height: .9;
  transform: none;
}

.purple-demo .demo-text small {
  padding: 7px 12px;
  color: #f9dd4a;
  border: 1px solid #f9dd4a;
  border-radius: 5px;
}

.bilingual-demo {
  background: #050505;
}

.bilingual-demo .portrait-preview {
  height: 54%;
  margin-top: 23%;
  background-color: #20242a;
  background-size: contain;
  background-repeat: no-repeat;
}

.bilingual-demo .demo-text {
  justify-content: flex-end;
  gap: 5px;
  padding: 0 18px 94px;
  text-align: center;
  text-shadow: 2px 2px #000, -2px -2px #000, 2px -2px #000, -2px 2px #000;
}

.bilingual-demo .demo-text strong {
  font-family: Arial, sans-serif;
  font-size: 31px;
  line-height: 1.08;
}

.bilingual-demo .demo-text .red {
  color: #fff;
  font-size: 31px;
  line-height: 1.08;
  transform: none;
}

.bilingual-demo .demo-text small {
  margin: 2px 0 0;
  color: #fff;
  font-size: 24px;
}

@media (max-width: 600px) {
  .template-picker {
    grid-template-columns: 1fr;
  }
}