.grid {
  max-width: 100%;
  counter-reset: grid-item;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
    min-height: 90px;
}

.grid-item .card-body {line-height:1; padding: 4px 0.75rem;}
.grid-item .form-group {margin-bottom:.65rem; }
.grid-item .form-group .form-control-sm {line-height:1;}
.grid-item .card { min-height: 86px; height: 86px; }
.grid-item--height1 .card.hotsheet-card { min-height: 86px; height:auto;}
.grid-item--height2 .card { min-height: 176px; height: 176px; }
.grid-item--height2 .offAgtInv .card { min-height: 162px; height: 162px; }
.grid-item--height3 .card-height3 { min-height: 272px; height: 272px; }
.grid-item--height2 .card-height3 { min-height: 552px; height: 552px; }
.offAgtInv {padding-left:0;padding-right:0;}
.offAgtInv > .card {border:0 solid #fff;}
.offAgtInv > .card > .card-body {padding: 4px 0;}

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 720px; }

.grid-item--height1 { min-height: 90px; }
.grid-item--height2 { min-height: 180px; }
.grid-item--height3 { min-height: 272px; }
.grid-item--height4 { min-height: 362px; }

@media (min-width: 576px) {
    .grid-item--height1 { min-height: 180px; }
    .grid-item--height1 .card.hotsheet-card { min-height: 176px; height: 176px; }
}

@media (min-width: 768px) {
    .grid-item--height1 { min-height: 180px; }
    .grid-item--height1 .card.hotsheet-card { min-height: 176px; height: 176px; }
}

@media (min-width: 992px) {
    .grid-item--height1 { min-height: 90px; }
    .grid-item--height1 .card.hotsheet-card { min-height: 86px; height: 86px; }
}

@media (min-width: 1200px) {
    .grid-item--height1 { min-height: 90px; }
    .grid-item--height1 .card.hotsheet-card { min-height: 86px; height: 86px; }
}



@media (min-width: 576px) {
    .grid-item--height2 .card-height3 { min-height: 552px; height: 552px; }
}

@media (min-width: 768px) {
    .grid-item--height2 .card-height3 { min-height: 362px; height: 362px; }
}

@media (min-width: 992px) {
    .grid-item--height2 .card-height3 { min-height: 180px; height: 180px; }
}

@media (min-width: 1200px) {
    .grid-item--height2 .card-height3 { min-height: 180px; height: 180px; }
}