#programmable-btn .bo-temp {
  display: grid;
}
#programmable-btn .content {
  grid-row: 1; width:100%;
}
#programmable-btn .picture {
  grid-row: 2;
}
#programmable-btn .icons {
  grid-row: 3;
  padding-top: 2rem;
}
#programmable-btn .icons ul li {
  text-align: left;
}
#programmable-btn ol:first-child{
 border-right: 1px solid #232323;
}
#programmable-btn ol{
  display: inline-block !important;
  list-style-position: outside;
  width: 100%;
    padding-left: 30px;
    text-align: left;
  li {
    display: list-item !important;
  }
  ::marker {
    color: var(--cx-g-color-primary);
   font-weight: 500;
  }
  a:has(em) {
    color: inherit;
    text-underline-offset: 0px !important;
  }
}
.razer-rtl #programmable-btn .icons ul li {
  text-align: right;
}
@media (min-width: 767px) {
  #programmable-btn .icons {
    padding-top: 0!important;
  }
  #programmable-btn .icons ul {
    display: block;
    font-size: 0;
    max-width: 900px;
  }
  #programmable-btn .icons ul > li {
    display: inline-block;
    width: 50%;
    vertical-align: top;
  }
	#programmable-btn ol{
 	 column-count: 2; text-align: left;
	}
}
@media (max-width: 768px) {
    .bo-temp .multi-panels ul li:not(.have-role-group) .body-copy {width:100%}
}
#programmable-btn .parts-col { display:flex; flex-direction:row; gap:1rem}
@media (max-width: 320px) {
    #programmable-btn ol li{font-size:14px}
}
@media (min-width: 768px) {
.hover-tiles .tiles .tile-item .header {font-size:28px}
}
 @media screen and (max-width:767px){} @media screen and (-webkit-max-device-pixel-ratio: 1) and (min-width: 1200px), screen and (min-width: 768px) and (max-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 1200px){} @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 1200px){}