:root {
  --gradient: linear-gradient(rgba(60,16,83,0) 40%, rgba(60,16,83,0.75) 70%);
  --textcolor: white;
}

.idgbox {
  display: flex;
  flex-direction: column;
  justify-content: end;
  border-radius: 7px;
  margin: 10px;
  margin-bottom: 20px;
  padding: 20px;
  background: var(--gradient), var(--bg-img);
  background-blend-mode: multiply;
  min-width: 18%;
}

.idgbox, .idgbox h2, .idgbox a {
  color: var(--textcolor);
}

.idgbox a {
  text-decoration: underline white;
}

.flexible-resize {
  flex-flow: row nowrap;
}

.flexible-resize-2 {
  flex-flow: row wrap;
  justify-content: center;
  .idgbox {
    margin: 0px;
    margin-bottom: 20px;
  }
}

.bottom {
  text-shadow: 0px 1px 2px black;
}

/* MOBILE VIEW BACKGROUNDS */
.bus {
  --bg-img: url(./engagement-mob.png?maxWidth=600);
}

.infra {
  --bg-img: url(./infraops-mob.png?maxWidth=600);
}

.lib {
  --bg-img: url(./library-mob.png?maxWidth=600);
}

.port {
  --bg-img: url(./portfolio-mob.png?maxWidth=600);
}

.data {
  --bg-img: url(./datalabs-mob.png?maxWidth=600);
}

/* MOBILE VIEW BACKGROUND POSITION */
.idgbox {
  height: 250px;
  background-size: cover;
  background-position: top center;
}

@media only screen and (min-width: 768px) {
  /* DESKTOP VIEW BACKGROUNDS */
    .bus {
    --bg-img: url(./engagement.png?maxWidth=600);
    }
    
    .infra {
    --bg-img: url(./infraops.png?maxWidth=600);
    }
    
    .lib {
    --bg-img: url(./library.png?maxWidth=600);
    }
    
    .port {
    --bg-img: url(./portfolio.png?maxWidth=600);
    }
    
    .data {
    --bg-img: url(./datalabs.png?maxWidth=600);
    }
    
  /* DESKTOP VIEW BACKGROUND POSITION */

    .idgbox {
    min-height: 250px;
    background-size: cover;
    background-position: top right;
    }
  }