/**********************
 * VIEW MODE: FULL
 **********************/

/* Override the search grid in tablet to continue showing 4 columns. */
.paragraph--type-staff.paragraph--view-mode-full .grid.grid-4.staff-search-view > .view-content {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .paragraph--type-staff.paragraph--view-mode-full .grid.grid-4.staff-search-view > .view-content {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/***********************
 * VIEW MODE: FULL with CURATED CONTENT
 ***********************/

.paragraph--type-staff.paragraph--view-mode-full.component--show-curated {
  background-color: rgba(104,210,242,0.5); /* #68d2f2 */
  padding-top: 65px;
  padding-bottom: 65px;
  margin-top: 0;
  margin-bottom: 0;
}
.paragraph--type-staff.paragraph--view-mode-full.component--show-curated.component--with-heading {
  padding-top: 40px;
  padding-bottom: 40px;
}

  .paragraph--type-staff.paragraph--view-mode-full.component--show-curated .field--name-field-staff-curated {
    row-gap: 40px;
  }

/***********************
 * VIEW MODE: FULL with CURATED CONTENT with COLORS
 ***********************/

.content--color .paragraph--type-staff.paragraph--view-mode-full.component--show-curated h2.component--heading {
  color: #fff;
}

.content--color-blue .paragraph--type-staff.paragraph--view-mode-full.component--show-curated {
  background-color: #019de0;
}
.content--color-bluedark .paragraph--type-staff.paragraph--view-mode-full.component--show-curated {
  background-color: #0f369b;
}
.content--color-orange .paragraph--type-staff.paragraph--view-mode-full.component--show-curated {
  background-color: #eb3f21;
}
.content--color-purple .paragraph--type-staff.paragraph--view-mode-full.component--show-curated {
  background-color: #6f2be4;
}

/***********************
 * VIEW MODE: FULL with FEATURED CONTENT
 ***********************/

.paragraph--type-staff.paragraph--view-mode-full.component--show-featured {}

  .paragraph--type-staff.paragraph--view-mode-full.component--show-featured .node--view-mode-featured {
    max-width: 100%;
  }

  /* Adjust slick controls when shown on featured components. */
  .paragraph--type-staff.paragraph--view-mode-full.component--show-featured .slick-controls {
    left: auto;
    right: 0;
  }