.gita-yoga-root {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
}

.gita-yoga-panels {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(0, .27fr) minmax(0, .68fr) minmax(0, .43fr) minmax(0, .62fr);
  position: relative;
}

.gita-yoga-panel {
  z-index: 0;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
}

.gita-yoga-sanskrit {
  grid-column: 1 / 7;
  grid-row: 1 / 3;
  margin-bottom: 6px;
  background: #fbf6ea;
}

.gita-yoga-language-panel { grid-row: 3 / 5; margin-top: 6px; }
.gita-yoga-kn { color: #26384a; background: #f2f4f3; }
.gita-yoga-en { color: #45565d; background: #eaefee; }

.gita-yoga-root[data-primary-language="kn"] [data-language-panel="kn"],
.gita-yoga-root[data-primary-language="en"] [data-language-panel="en"] { grid-column: 1 / 4; margin-right: 6px; }
.gita-yoga-root[data-primary-language="kn"] [data-language-panel="en"],
.gita-yoga-root[data-primary-language="en"] [data-language-panel="kn"] { grid-column: 4 / 7; margin-left: 6px; }

.gita-yoga-field {
  z-index: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.gita-yoga-sanskrit-words {
  grid-column: 1 / 7;
  grid-row: 1;
  align-self: center;
  padding: 15px clamp(22px, 6vw, 90px) 5px;
  color: #33261e;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.7;
  opacity: .86;
  text-align: center;
}

.gita-yoga-shloka,
.gita-yoga-transliteration {
  grid-row: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px clamp(15px, 2.2vw, 34px) 20px;
  text-align: center;
  text-wrap: balance;
}

.gita-yoga-shloka {
  grid-column: 1 / 3;
  color: #33261e;
  font-size: clamp(20px, 1.72vw, 27px);
  font-weight: 550;
  line-height: 1.52;
  letter-spacing: .005em;
}

.gita-yoga-transliteration { font-size: clamp(17px, 1.4vw, 22px); font-weight: 430; line-height: 1.62; }
.gita-yoga-root[data-primary-language="kn"] [data-role="kn-transliteration"],
.gita-yoga-root[data-primary-language="en"] [data-role="en-transliteration"] { grid-column: 3 / 5; }
.gita-yoga-root[data-primary-language="kn"] [data-role="en-transliteration"],
.gita-yoga-root[data-primary-language="en"] [data-role="kn-transliteration"] { grid-column: 5 / 7; }

.gita-yoga-meaning {
  grid-row: 3;
  align-self: stretch;
  padding: 22px clamp(22px, 2.5vw, 34px) 6px;
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 400;
  line-height: 1.55;
}

.gita-yoga-word-meaning {
  grid-row: 4;
  align-self: stretch;
  padding: 6px clamp(22px, 2.5vw, 34px) 22px;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  opacity: .88;
}

.gita-yoga-root[data-primary-language="kn"] .gita-yoga-lower-content.gita-yoga-kn-content,
.gita-yoga-root[data-primary-language="en"] .gita-yoga-lower-content.gita-yoga-en-content { grid-column: 1 / 4; margin-right: 6px; }
.gita-yoga-root[data-primary-language="kn"] .gita-yoga-lower-content.gita-yoga-en-content,
.gita-yoga-root[data-primary-language="en"] .gita-yoga-lower-content.gita-yoga-kn-content { grid-column: 4 / 7; margin-left: 6px; }

.gita-yoga-field.empty { color: #8c877d; font-style: italic; font-weight: 400; opacity: .72; }

@media (max-width: 760px) {
  .gita-yoga-root { height: auto; overflow: visible; }
  .gita-yoga-panels { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(8, auto); }
  .gita-yoga-panel { grid-column: 1 !important; margin: 0 !important; }
  .gita-yoga-sanskrit { grid-row: 1 / 3; margin-bottom: 4px !important; }
  .gita-yoga-language-panel { margin-top: 4px !important; margin-bottom: 4px !important; }
  .gita-yoga-root[data-primary-language="kn"] [data-language-panel="kn"],
  .gita-yoga-root[data-primary-language="en"] [data-language-panel="en"] { grid-row: 3 / 6; }
  .gita-yoga-root[data-primary-language="kn"] [data-language-panel="en"],
  .gita-yoga-root[data-primary-language="en"] [data-language-panel="kn"] { grid-row: 6 / 9; }
  .gita-yoga-field { grid-column: 1 !important; margin: 0 !important; display: block; }
  .gita-yoga-shloka { grid-row: 1; padding: 29px 19px 8px; font-size: clamp(25px, 7.6vw, 32px); line-height: 1.6; }
  .gita-yoga-sanskrit-words { grid-row: 2; padding: 8px 19px 27px; font-size: 16px; line-height: 1.85; }
  .gita-yoga-root[data-primary-language="kn"] [data-role="kn-transliteration"],
  .gita-yoga-root[data-primary-language="en"] [data-role="en-transliteration"] { grid-row: 3; }
  .gita-yoga-root[data-primary-language="kn"] [data-role="kn-meaning"],
  .gita-yoga-root[data-primary-language="en"] [data-role="en-meaning"] { grid-row: 4; }
  .gita-yoga-root[data-primary-language="kn"] [data-role="kn-words"],
  .gita-yoga-root[data-primary-language="en"] [data-role="en-words"] { grid-row: 5; }
  .gita-yoga-root[data-primary-language="kn"] [data-role="en-transliteration"],
  .gita-yoga-root[data-primary-language="en"] [data-role="kn-transliteration"] { grid-row: 6; }
  .gita-yoga-root[data-primary-language="kn"] [data-role="en-meaning"],
  .gita-yoga-root[data-primary-language="en"] [data-role="kn-meaning"] { grid-row: 7; }
  .gita-yoga-root[data-primary-language="kn"] [data-role="en-words"],
  .gita-yoga-root[data-primary-language="en"] [data-role="kn-words"] { grid-row: 8; }
  .gita-yoga-transliteration { padding: 24px 20px 8px; font-size: clamp(19px, 5.4vw, 23px); line-height: 1.55; }
  .gita-yoga-meaning { padding: 8px 20px; font-size: 17px; line-height: 1.65; }
  .gita-yoga-word-meaning { padding: 8px 20px 24px; font-size: 14px; line-height: 1.65; }
}

html.mobile-layout .gita-yoga-root { height: auto; overflow: visible; }
html.mobile-layout .gita-yoga-panels { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(8, auto); }
html.mobile-layout .gita-yoga-panel { grid-column: 1 !important; margin: 0 !important; }
html.mobile-layout .gita-yoga-sanskrit { grid-row: 1 / 3; margin-bottom: 4px !important; }
html.mobile-layout .gita-yoga-language-panel { margin-top: 4px !important; margin-bottom: 4px !important; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-language-panel="kn"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-language-panel="en"] { grid-row: 3 / 6; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-language-panel="en"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-language-panel="kn"] { grid-row: 6 / 9; }
html.mobile-layout .gita-yoga-field { grid-column: 1 !important; margin: 0 !important; display: block; }
html.mobile-layout .gita-yoga-shloka { grid-row: 1; padding: 29px 19px 8px; font-size: clamp(25px, 7.6vw, 32px); line-height: 1.6; }
html.mobile-layout .gita-yoga-sanskrit-words { grid-row: 2; padding: 8px 19px 27px; font-size: 16px; line-height: 1.85; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-role="kn-transliteration"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-role="en-transliteration"] { grid-row: 3; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-role="kn-meaning"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-role="en-meaning"] { grid-row: 4; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-role="kn-words"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-role="en-words"] { grid-row: 5; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-role="en-transliteration"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-role="kn-transliteration"] { grid-row: 6; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-role="en-meaning"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-role="kn-meaning"] { grid-row: 7; }
html.mobile-layout .gita-yoga-root[data-primary-language="kn"] [data-role="en-words"],
html.mobile-layout .gita-yoga-root[data-primary-language="en"] [data-role="kn-words"] { grid-row: 8; }
html.mobile-layout .gita-yoga-transliteration { padding: 24px 20px 8px; font-size: clamp(19px, 5.4vw, 23px); line-height: 1.55; }
html.mobile-layout .gita-yoga-meaning { padding: 8px 20px; font-size: 17px; line-height: 1.65; }
html.mobile-layout .gita-yoga-word-meaning { padding: 8px 20px 24px; font-size: 14px; line-height: 1.65; }