<div class="forms">
  <div class="controls">
    <label for="direction">direction:</label>
    <select id="direction">
      <option value="ltr">ltr</option>
      <option value="rtl">rtl</option>
    </select>
  </div>
  <div class="controls">
    <label for="writingmode">writing-mode:</label>
    <select id="writingmode">
      <option value="horizontal-tb">horizontal-tb</option>
      <option value="vertical-lr">vertical-lr</option>
      <option value="vertical-rl">vertical-rl</option>
    </select>
  </div>
</div>

<div id="container">
  <div class="box"></div>
</div>

<div class="grid">
  <div class="item" lang="english">
    <p>City Lights in New York</p>
  </div>

  <div class="item" lang="arabic">
    <p>أضواء المدينة في نيويورك</p>
  </div>

  <div class="item" lang="japanese">
    <p>ニューヨークの街の灯</p>
  </div>

  <div class="item" lang="mongolian">
    <p>Нью Йорк дахь хотын гэрлүүд</p>
  </div>

</div>

* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-direction:column;
  align-items: center;
}

.forms {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vh;
}
.controls {
  background-color: rgba(0,0,0,.1);
  padding: 10px;
  border-radius: .5em;
  border: 1px solid rgba(0,0,0,.2);
  margin: 0 10px;
}

.controls select {
  font-size: .9em;
}

.box {
  inline-size: 50vh;
  block-size: 30vh;
  border-radius: 5px;
  background-image:url('//www.w3cplus.com/sites/default/files/blogs/2020/2005/photo-1548865164-c4e93ca471aa.jpeg'), linear-gradient(to right,#1622c5, #1622c5);
  background-repeat: no-repeat;
  background-size: cover;
  background-origin: border-box;
  background-clip: content-box, padding-box;
  
  border-inline-start: 6px solid #9c27b0;
  border-inline-end: 8px solid #ff9800;
  border-block-start: 10px solid #2196f3;
  border-block-end: 12px solid #8bc34a;
  
  padding-inline-start: 10px;
  padding-inline-end: 20px;
  padding-block-start: 30px;
  padding-block-end: 40px;
}

:root {
  --writingMode: horizontal-tb;
  --direction: ltr;
}

#container {
  writing-mode: var(--writingMode);
  direction: var(--direction);
}

.grid {
  display: flex;
  justify-content: center;
  padding: 2vh;
}

.item p{
  inline-size: 50vh;
  block-size: 30vh;
  border-radius: 4px;
  display: flex;
  padding: 2vh;
  align-items: center;
  color: #fff;
  margin: 2vh;
  
  background-origin: border-box;
  background-clip: content-box, padding-box;
  
  border-inline-start: 6px solid #9c27b0;
  border-inline-end: 8px solid #ff9800;
  border-block-start: 10px solid #2196f3;
  border-block-end: 12px solid #8bc34a;
  
  padding-inline-start: 10px;
  padding-inline-end: 20px;
  padding-block-start: 30px;
  padding-block-end: 40px;
}

.item[lang="english"]{
  direction: ltr;
  writing-mode: horizontal-tb;
}

.item[lang="english"] p{
  background-image: linear-gradient(#dE685E, #EE786E), linear-gradient(#1622c5, #1622c5);
}

.item[lang="arabic"]{
  direction: rtl;
  writing-mode: horizontal-tb;
}

.item[lang="arabic"] p{
  background-image: linear-gradient(#92bCa6, #A2CCB6),linear-gradient(#1622c5, #1622c5);
}

.item[lang="japanese"]{
  writing-mode: vertical-rl;
}

.item[lang="japanese"] p{
  background-image: linear-gradient(#4094bc, #2783b9),linear-gradient(#1622c5, #1622c5);
}

.item[lang="mongolian"]{
  writing-mode: vertical-lr;
}

.item[lang="mongolian"] p{
  background-image: linear-gradient(#673AB7, #8d59e9),linear-gradient(#1622c5, #1622c5);
}

const writingMode = document.getElementById("writingmode");
const direction = document.getElementById("direction");
const documentElement = document.documentElement;
writingMode.addEventListener("change", function (evt) {
  documentElement.style.setProperty("--writingMode", evt.target.value);
});

direction.addEventListener("change", function (evt) {
  documentElement.style.setProperty("--direction", evt.target.value);
});