/* Original operational icon map and responsive details. */
.trv3-function-list{
  margin:0;
  color:rgba(243,240,232,.72);
  font-size:16px;
  line-height:1.62;
}
.trv3-map{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  border:1px solid rgba(243,240,232,.16);
  border-radius:14px;
  overflow:hidden;

  background:rgba(24,24,23,.25);

  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);

  box-shadow:0 18px 55px rgba(0,0,0,.10);
}
.trv3-function{
  position:relative;
  min-width:0;
  height:150px;

  border-right:1px solid rgba(243,240,232,.15);
  border-bottom:1px solid rgba(243,240,232,.15);

  overflow:hidden;
  cursor:default;

  background:rgba(24,24,23,.04);

  transition:
    background-color .28s ease;
}
.trv3-function:nth-child(4),
.trv3-function:nth-child(8){
  border-right:none;
}
.trv3-function::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  background:
    linear-gradient(
      145deg,
      rgba(119,130,118,.40),
      rgba(24,24,23,.42)
    );

  opacity:0;

  transition:opacity .28s ease;
}
.trv3-function::after{
  content:"";
  position:absolute;
  top:0;
  left:50%;

  width:0;
  height:3px;

  transform:translateX(-50%);

  background:var(--brass);

  transition:width .28s ease;
}
.trv3-function:is(:hover,:focus-visible)::before{
  opacity:1;
}
.trv3-function:is(:hover,:focus-visible)::after{
  width:58%;
}
.trv3-default{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:11px;

  text-align:center;

  transition:
    opacity .22s ease,
    transform .28s ease;
}
.trv3-icon{
  display:block;

  width:54px;
  height:54px;
  flex:0 0 54px;

  background-color:var(--brass);

  -webkit-mask-image:var(--icon);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;

  mask-image:var(--icon);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.trv3-name{
  color:var(--bone);
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  white-space:nowrap;
}
.trv3-function:is(:hover,:focus-visible) .trv3-default{
  opacity:0;
  transform:translateY(-10px);
}
.trv3-details{
  position:absolute;
  inset:0;
  z-index:3;

  padding:21px 16px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  opacity:0;
  transform:translateY(10px);

  transition:
    opacity .25s ease,
    transform .28s ease;
}
.trv3-function:is(:hover,:focus-visible) .trv3-details{
  opacity:1;
  transform:translateY(0);
}
.trv3-details strong{
  display:block;

  margin-bottom:10px;

  color:var(--brass);

  font-size:15px;
  line-height:1.2;
  font-weight:700;
}
.trv3-details span{
  display:block;

  margin:1px 0;

  color:rgba(243,240,232,.88);

  font-size:11px;
  line-height:1.45;
  font-weight:500;
}
@media (max-width:600px){.trv3-function-list{
    font-size:15px;
  }
.trv3-map{
    grid-template-columns:repeat(2,1fr);
  }
.trv3-function{
    height:132px;
  }
.trv3-function:nth-child(4),
.trv3-function:nth-child(8){
    border-right:1px solid rgba(243,240,232,.15);
  }
.trv3-function:nth-child(even){
    border-right:none;
  }
.trv3-icon{
    width:46px;
    height:46px;
  }
.trv3-name{
    font-size:13px;
  }
.trv3-function{
    height:155px;
  }
.trv3-default{
    inset:14px 0 auto;
    height:62px;
    justify-content:flex-start;
    gap:3px;
  }
.trv3-icon{
    width:38px;
    height:38px;
  }
.trv3-details{
    inset:auto 8px 12px;
    padding:0;

    align-items:center;

    opacity:1;
    transform:none;

    text-align:center;
  }
.trv3-details strong{
    display:none;
  }
.trv3-details span{
    font-size:9px;
    line-height:1.35;
  }
.trv3-function:is(:hover,:focus-visible) .trv3-default{
    opacity:1;
    transform:none;
  }
.trv3-function::before,
.trv3-function::after{
    display:none;
  }
}