.research-container {
  position: relative;
  padding: var(--spacing-lg) var(--spacing-lr);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-md);
  background-color: var(--color-blue-700);
  color: var(--color-white);
}

.grid-layer {
  position: relative;
  background:
    linear-gradient(-90deg, rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), 
    linear-gradient(-90deg, rgba(255, 255, 255, .1) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(transparent 160px, var(--color-blue-700) 160px, var(--color-blue-700) 1px, transparent 1px),
    linear-gradient(-90deg, rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(-90deg, transparent 160px, var(--color-blue-700) 160px, var(--color-blue-700) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    var(--color-blue-700);
  background-size:
    32px 32px,
    32px 32px,
    160px 160px,
    160px 160px,
    160px 160px,
    160px 160px,
    160px 160px,
    160px 160px;
}

.grid-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: linear-gradient(180deg, var(--color-blue-700) 0%, transparent 20%, transparent 80%, var(--color-blue-700) 100%);
  background-repeat: no-repeat;
}

.research-content {
  grid-column-start: 2;
  grid-column-end: 4;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: start;
  justify-content: center;
  z-index: 10;
}

.research-content img {
  grid-column-start: 1;
  grid-column-end: 2;
  height: auto;
}

/* graphic beside the research content */
.research-graphic {
  grid-column-start: 1;
  grid-column-end: 2;
  height: auto;
  display: block;
}

@media (max-width: 600px) {
    .research-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .research-content {
        grid-column-start: auto;
        grid-column-end: auto;
    }

    .research-graphic {
      display: block;
      width: auto !important;
      max-width: 200px !important;
      height: auto !important;
      margin-left: auto;
      margin-right: auto;
    }
}