#build-open {
   font-size: 2rem;
}

#build-menu:hover>#build-inner {
   height: fit-content;
}

#build-inner {
   margin-top: .25rem;
   padding-top: 1rem;
   padding-inline: 2rem;

   gap: 1rem;
   justify-items: end;
   right: -5vw;
}

.build-category {
   display: flex;
   justify-content: right;
   align-items: start;
   width: 100%;
   gap: 1.5em;

   padding-top: 2em;
}

.build-category::before {
   content: '- ' attr(data-type) ' -';
   position: absolute;
   top: 0;
   font-weight: bold;
   text-transform: uppercase;

}

.build-category[data-type="generators"] > * {
   height: 100%;
   padding: 1vw 2vw;
}



/* wrapper around this.elem */
.buy-structure {
   display: grid;
   place-items: center;

   border: 1px solid;
   border-radius: 1rem;
   box-shadow: 0 0 .5rem .5rem var(--dg) inset;

   background-color: var(--vdg);
}

.buy-structure[data-size="2"],
.buy-structure[data-size="4"] {
   width: 6vw;
   aspect-ratio: 1/1.4;

   >* {
      height: 100%;
      width: 100%;
   }

}

.buy-structure[data-size="4"] {
   aspect-ratio: 1/2.8;
}


[data-price]::after {
   content: '$ ' attr(data-price);
   position: absolute;
   margin-top: .5em;
   font-weight: bold;
   top: .5rem;
   right: -1rem;
   background-color: var(--tbl);
   box-shadow: var(--shd);
   text-decoration: underline;
   z-index: 50;
}


[data-price]:not(.no-buy):hover::after {
   text-decoration: underline var(--pk);
}