Armàn's questions

.settings {
  padding: 0;
}

.settings_tabs {
  display: inline-block;
  float: left;
  margin: 10px;
  /* grid-template-columns: repeat(3, 1fr); */
  /* grid-template-rows: 94px; */
  grid-gap: 13px;
}

.option {
  cursor: pointer;
  display: grid;
  grid-template-rows: 2fr 1fr;
  align-content: center;
  font-size: 12px;
  text-align: center;
  background: var(--grey);
  border-radius: 12px;
}

.option.selected {
  background: var(--gradient);
  color: white;
}

.option.selected.i {
  opacity: 1;
}

.option i {
  align-self: center;
  font-size: 5em;
  opacity: 0.7;
}

<div id="settings" class="settings">
  <div class="settings_tabs">
    <div data-type="temperatue" class="option">
      <i class="ic_temperature"></i>
      <span>Temperature</span>
      <div data-type="lights" class="option">
        <i class="ic_lights"></i>
        <span>Lights</span>
        <div data-type="humidity" class="option">
          <i class="ic_humidity"></i>
          <span>Humidity</span>
        </div>
      </div>