.gen5wrapper { 
    width:100%;
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 9px;
  font-size:0.7em;
}
/*[class^="s"] {padding-left:2px;}
[class^="d"] {padding-left:2px;}
*/.item {background-color:bisque;}
.line-breeding {display:none;}
.bolded {font-weight:bold; background-color:coral !important;}
.sire-link {width:80%; padding:12px; border:1px solid #000; border-radius:10px; margin-bottom:12px; background-color:#ececec; margin-left:12px;}
.s1 {display: inline-grid; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 17; background-color:#ececec; border:1px dotted black; align-items: center;}
.d1 {display: inline-grid; grid-column-start: 1; grid-column-end: 2; grid-row-start: 17; grid-row-end: 33; background-color:#fff; border:1px dotted black; align-items: center;}
.s21 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 9; background-color:#ececec; border:1px dotted black; align-items: center;}
.d21 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 9; grid-row-end: 17; background-color:#fff; border:1px dotted black; align-items: center;}
.s22 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 17; grid-row-end: 25; background-color:#ececec; border:1px dotted black; align-items: center;}
.d22 {display: inline-grid; grid-column-start: 2; grid-column-end: 3; grid-row-start: 25; grid-row-end: 33; background-color:#fff; border:1px dotted black; align-items: center;}
.s31 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5; background-color:#ececec; border:1px dotted black; align-items: center;}
.d31 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 5; grid-row-end: 9; background-color:#fff; border:1px dotted black; align-items: center;}
.s32 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 9; grid-row-end: 13; background-color:#ececec; border:1px dotted black; align-items: center;}
.d32 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 13; grid-row-end: 17; background-color:#fff; border:1px dotted black; align-items: center;}
.s33 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 17; grid-row-end: 21; background-color:#ececec; border:1px dotted black; align-items: center;}
.d33 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 21; grid-row-end: 25; background-color:#fff; border:1px dotted black; align-items: center;}
.s34 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 25; grid-row-end: 29; background-color:#ececec; border:1px dotted black; align-items: center;}
.d34 {display: inline-grid; grid-column-start: 3; grid-column-end: 4; grid-row-start: 29; grid-row-end: 33; background-color:#fff; border:1px dotted black; align-items: center;}


@media only screen and (min-width: 768px) {
    .sire-link {all: unset; display:block;}
        }

@media only screen and (min-width: 992px) {
    .gen5wrapper {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 9px;
        font-size: 0.7em;
        margin-top:6px;
    }
    .line-breeding {display:block; font-size:0.8em;}
    
        }