#main-content .gc-title .h2-size {
  margin-bottom: 0.875rem;
  padding-bottom: 0.5em;
}

.page-node-type-capabilities #header {
  position: static;
}

.page-node-type-capabilities .graphic-component {
  margin-top: 200px;
}

.graphic-component.grey {
  background-color: var(--grey-extra-light);
}

.graphic-component {
  width: 100%;
  padding: 100px 0 100px 0;
  box-sizing: border-box;
  font-family: var(--text-font);
  position: relative;
  overflow: hidden;
}

body[class*="page-node-type"].path-node
  .graphic-component.simple
  .slick-dotted.slick-slider {
  height: 100%;
}

.tab-table .graphic-component {
  padding: 0;
}

.graphic-component .capability-container {
  width: 250px;
}

.graphic-component .gc-title {
  text-align: center;
  /*margin-bottom: 45px;*/
}

.graphic-component .gc-title .h2-size {
  color: #1d1d1d;
}

.field--name-field-cp-graphic-components {
  display: flex;
  column-gap: 29px;
  justify-content: center;
}

.capability {
  width: 250px;
  height: 250px;
  position: relative;
  padding: 40px;
  box-sizing: border-box;
}

.capability-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.capability.cp-background picture {
  display: none;
}

.capability-bg img {
  max-width: none;
}

.capability-bg.bg-color-white {
  background-color: #ffffff;
}

#main-content .flip-card-front p {
  font-family: var(--text-font);
}

.field--name-field-cpp-inner-text {
  padding: 0 0.5rem;
}

#main-content .field--name-field-cp-content-text p {
  font-family: var(--text-font);
}

#main-content .field--name-field-cp-content-text a {
  font-family: var(--text-font);
}

.capability-bg::after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: bottom 0.5s ease-in-out;
}

.capability:hover .capability-bg::after {
  bottom: 100%;
}

.field--name-field-cpp-title {
  position: relative;
  transition: color 0.5s ease-in-out;
  font-size: 1.125rem;
  line-height: 1.75rem;
  max-width: 151px;
}

.graphic-component:not(.simple) .capability:hover .field--name-field-cpp-title {
  color: #ffffff;
}

.cp-link {
  position: absolute;
  bottom: 40px;
  left: 40px;
  transition: background-color 0.3s ease-in-out;
}

.capability:hover .cp-link.bg-color-5 {
  background-color: #ffffff;
}

.field--name-field-cpp-url {
  position: relative;
  line-height: 12px;
  font-size: 12px;
}

#main-content .field--name-field-cpp-url a {
  color: #ffffff;
  display: block;
  padding: 15px 22px;
}

.capability.cp-hide-title:hover .field--name-field-cpp-title {
  display: none;
}

.cp-image .capability-bg::before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
}

.one-column .graphic-component .slick-list {
  width: 1116px;
  box-sizing: content-box;
  margin: auto;
}

.graphic-component.simple .capability-bg::before,
.graphic-component.simple .capability-bg::after {
  display: none;
}

.graphic-component.simple .capability a:link,
.graphic-component.simple .capability a:visited {
  position: static;
  margin-top: auto;
}

.graphic-component.simple .capability {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 70px;
}

.graphic-component.grey.default.simple .capability {
  padding-bottom: 0;
}

.graphic-component.grey.default.simple .capability .cp-link {
  margin-top: 30px;
  position: relative;
}

.graphic-component.simple .cp-link {
  left: 0;
  bottom: 0;
}

.capability:hover .cp-link,
.graphic-component .cp-link {
  border: 0;
}

.graphic-component.simple .capability-bg {
  position: static;
  height: auto;
}

.graphic-component.simple .field--name-field-cpp-title {
  min-width: 100%;
  margin-top: 1rem;
  padding-bottom: 0.5em;
  font-size: 1.125rem;
  line-height: 1.4625rem;
  font-family: var(--title-font);
}

.field--name-field-cpp-title {
  font-family: var(--title-font);
}

.graphic-component.simple .field--name-field-cpp-text {
  height: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.field--name-field-cpp-text {
  color: #1d1d1d;
  opacity: 1;
  font-size: var(--font-body-medium) !important;
  line-height: 22px;
  margin-top: 1rem;
}

.capability.cp-video {
  cursor: pointer;
}

.capability.cp-video video-js:not(.vjs-fullscreen) video {
  width: 185%;
  left: -48%;
}

.capability.cp-video video-js:not(.vjs-fullscreen) .vjs-control-bar,
.capability.cp-video video-js:not(.vjs-fullscreen) .vjs-big-play-button {
  display: none;
}

.gc-center {
  width: 1120px;
  padding-left: 16px;
  padding-right: 16px;
  margin: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.two-columns .node-body .gc-center {
  width: 100%;
  padding: 0;
}

/*.two-columns .node-body .field--name-field-cp-graphic-components,*/
.two-columns .field--name-field-cp-graphic-components .slick-list {
  /*  width: 558px;
    padding-right: 381px;*/
  /*padding-left: 45px;*/
  box-sizing: content-box;
  /*  width: 840px;
    padding-right: 99px;*/
}

.two-columns .field--name-field-cp-graphic-components .slick-slide {
  width: 280px;
}

.slick-slide:not(.slick-active) {
  cursor: pointer;
}

.gc-slick-next svg {
  transform: rotate(180deg);
}

.graphic-component .slick-arrow {
  position: absolute;
  cursor: pointer;
  z-index: 1;
  margin-top: 6px;
}

.graphic-component .slick-arrow svg path {
  fill: #000000;
  opacity: 0.75;
}

.graphic-component .slick-arrow.slick-disabled svg path {
  opacity: 0.25;
}

.graphic-component .slick-dots {
  bottom: -50px;
}

.graphic-component .slick-dots li {
  /* width: 10px;
  height: 10px;
  margin: 0 10px; */
  width: 20px;
  height: 20px;
}

.graphic-component .slick-dots li button::before {
  display: none;
}

.graphic-component .slick-dots li button:after {
  width: 100%;
  height: 100%;
  background-color: #000000;
  border-radius: 50%;
  opacity: 0.25;
  content: "";
  display: block;
}

.graphic-component .slick-dots li.slick-active button:after {
  opacity: 0.75;
}

.capability:hover .cp-link a:hover {
  text-decoration: none !important;
}

body:not(.viewer-opened) .gallery.default,
body:not(.viewer-opened) .gallery.block {
  padding-top: 0.5rem;
}

.page-node-type-story-item #main-content .gc-title .h2-size,
#main-content .gc-title .h2-size {
  color: #1d1d1d !important;
}

p.gc-subtitle {
  text-align: center;
  margin-bottom: 20px;
  font-family: var(--text-font);
}

.graphic-component.simple .capability {
  width: 260px;
}

.graphic-component.simple .capability img {
  width: 100%;
  object-fit: cover;
}

.graphic-component.simple .capability .field--name-field-cpp-text {
  font-family: var(--text-font);
}

/** COMPLEX CAPABILITIES **/

#main-content .capability-container.complex h1,
#main-content .capability-container.complex h2,
#main-content .capability-container.complex h3,
#main-content .capability-container.complex h4,
#main-content .capability-container.complex h5,
#main-content .capability-container.complex h6 {
  font-family: var(--title-font) !important;
}

#main-content .complex .field--name-field-cp-content-text p,
.complex .field--name-field-cp-content-text {
  font-size: var(--font-body-medium);
  line-height: var(--line-height-medium);
  margin-top: 1rem;
}

#main-content .field--name-field-cp-content-text p {
  padding-bottom: 0.3rem;
}

.complex .cp-image .capability-bg::before,
.complex .cp-image .capability-bg::after,
.complex .capability-bg::after {
  display: none;
}

#main-content .field--name-field-cp-content-text ul:not(.slick-dots),
#main-content .field--name-field-cp-content-text ul,
#main-content .field--name-field-cp-content-text ol {
  padding-left: 15px;
}

.capability-container ul li::marker {
  content: "•  ";
}

/** flipcard **/

.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  height: 250px;
  width: 100%;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#main-content .flip-card-front *,
#main-content .flip-card-back * {
  color: #ffffff;
}

.flip-card-front p {
  font-size: 0.85rem;
  line-height: 1rem;
}

.flip-card-front::after,
.reverse .flip-card-back::after {
  /* content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='64' height='64' viewBox='0 0 64 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.43 12.1399H16.48L21.73 6.87991C21.9058 6.64063 21.9907 6.34659 21.9694 6.05044C21.9482 5.7543 21.8222 5.47538 21.6141 5.26364C21.4059 5.0519 21.1292 4.92116 20.8335 4.89482C20.5378 4.86849 20.2423 4.94828 20 5.11991L12.48 12.5999C12.3636 12.716 12.2713 12.854 12.2082 13.0058C12.1452 13.1577 12.1128 13.3205 12.1128 13.4849C12.1128 13.6493 12.1452 13.8121 12.2082 13.964C12.2713 14.1159 12.3636 14.2538 12.48 14.3699L20 21.8499C20.2347 22.0846 20.5531 22.2165 20.885 22.2165C21.217 22.2165 21.5353 22.0846 21.77 21.8499C22.0047 21.6152 22.1366 21.2969 22.1366 20.9649C22.1366 20.633 22.0047 20.3146 21.77 20.0799L16.33 14.6399H35.43C39.1431 14.6399 42.704 16.1149 45.3295 18.7404C47.955 21.3659 49.43 24.9269 49.43 28.6399V31.9999C49.43 32.3314 49.5617 32.6494 49.7961 32.8838C50.0306 33.1182 50.3485 33.2499 50.68 33.2499C51.0115 33.2499 51.3295 33.1182 51.5639 32.8838C51.7983 32.6494 51.93 32.3314 51.93 31.9999V28.5899C51.9274 26.4262 51.4985 24.2842 50.6677 22.2863C49.837 20.2884 48.6207 18.4738 47.0884 16.9462C45.5561 15.4185 43.7378 14.2078 41.7374 13.3831C39.737 12.5584 37.5937 12.136 35.43 12.1399V12.1399Z' fill='black'/%3E%3Cpath d='M44 42.15C43.7653 41.9153 43.4469 41.7834 43.115 41.7834C42.7831 41.7834 42.4647 41.9153 42.23 42.15C41.9953 42.3847 41.8634 42.7031 41.8634 43.035C41.8634 43.3669 41.9953 43.6853 42.23 43.92L47.67 49.36H28.57C24.8656 49.3468 21.3175 47.8659 18.7028 45.2419C16.0881 42.6178 14.62 39.0644 14.62 35.36V32C14.62 31.6685 14.4883 31.3505 14.2539 31.1161C14.0195 30.8817 13.7015 30.75 13.37 30.75C13.0385 30.75 12.7205 30.8817 12.4861 31.1161C12.2517 31.3505 12.12 31.6685 12.12 32V35.39C12.12 39.7547 13.8525 43.9408 16.9369 47.029C20.0213 50.1171 24.2053 51.8547 28.57 51.86H47.57L42.32 57.12C42.2039 57.2353 42.1117 57.3724 42.0489 57.5234C41.986 57.6744 41.9536 57.8364 41.9536 58C41.9536 58.1636 41.986 58.3256 42.0489 58.4766C42.1117 58.6276 42.2039 58.7647 42.32 58.88C42.4339 58.9981 42.5707 59.0918 42.722 59.1555C42.8732 59.2191 43.0359 59.2512 43.2 59.25C43.3655 59.2503 43.5293 59.2177 43.6821 59.1542C43.8349 59.0907 43.9735 58.9975 44.09 58.88L51.57 51.4C51.6864 51.2839 51.7788 51.1459 51.8418 50.9941C51.9048 50.8422 51.9372 50.6794 51.9372 50.515C51.9372 50.3506 51.9048 50.1878 51.8418 50.0359C51.7788 49.8841 51.6864 49.7461 51.57 49.63L44 42.15Z' fill='black'/%3E%3C/svg%3E"); */
  content: "";
  background-image: url(../icons/19381-200.png);
  position: absolute;
  right: 25px;
  bottom: 25px;
  width: 40px;
  height: 36px;
  background-color: #ffffff;
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/** icon **/

.cp-icon .capability-bg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cp-icon img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

.capability.cp-icon svg {
  max-height: 170px;
}

.simple .capability.cp-icon svg {
  max-height: 129px;
  padding: 1rem 0;
  box-sizing: border-box;
}

.white-icon .capability-bg.bg-color-white {
  background-color: var(--color-4);
}

.white-icon.capability.cp-icon svg path,
.white-icon.capability.cp-icon svg rect,
.white-icon.capability.cp-icon svg polygon {
  fill: #fff;
}
/** text **/

#main-content
  .capability.cp-text
  .capability-bg:not(.bg-color-white)
  *:not(.javali-buttons) {
  color: #ffffff;
}

#main-content .capability.cp-text p {
  padding-bottom: 0.8em;
}

#main-content .capability.cp-text h1 {
  font-size: 3.5rem !important;
  line-height: 1.2 !important;
}

.capability.cp-text {
  overflow: hidden;
}

.text-in-image {
  position: relative;
  top: -250px;
  height: calc(250px - 1rem);
}

.vertical .text-in-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  top: -125px;
  height: 0;
}

/** new display */

.capability .color.icons {
  max-width: 100%;
}

.capability.cp-image svg {
  width: 100%;
  height: 100%;
  display: block;
}

.graphic-component:not(.default) .capability-container {
  width: 100%;
}

.col-1 .capability {
  width: 100%;
  margin: auto;
}

.col-1 .capability.cp-background,
.col-1 .capability.cp-image,
.col-1 .capability.cp-video,
.col-1 .capability.cp-flipcard,
.col-1 .capability.cp-icon,
.col-1 .capability.cp-text {
  width: calc(50% - 1rem);
}

.col-1 .capability-container.complex .capability{
  width: 100%;
}

.graphic-component:not(.default).col-1 .capability-container {
  width: calc(50% - 1rem);
  margin: auto;
}

.graphic-component.simple.col-1 .complex .capability{
  width: 100%;
}

.graphic-component.simple.col-1 .complex .capability-bg{
  height: auto;
}

.col-1 .field--name-field-cp-graphic-components {
  justify-content: unset;
}


body #main-content .graphic-component p + ul:not(.slick-dots) {
  margin-top: -0.2rem;
}

.graphic-component:not(.default) .field--name-field-cp-graphic-components {
  display: grid;
  column-gap: 2rem;
  row-gap: 3rem;
}

.col-2 .field--name-field-cp-graphic-components {
  grid-template-columns: 1fr 1fr;
}

.col-3 .field--name-field-cp-graphic-components {
  grid-template-columns: 1fr 1fr 1fr;
}

.col-4 .field--name-field-cp-graphic-components {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.col-2.simple .field--name-field-cp-graphic-components {
  grid-template-columns: 1fr 1fr;
}

.col-3.simple .field--name-field-cp-graphic-components {
  grid-template-columns: 260px 260px 260px;
}

.col-4.simple .field--name-field-cp-graphic-components {
  grid-template-columns: 260px 260px 260px 260px;
}

/** SIMPLE **/

.graphic-component.simple .capability-container {
  width: 260px;
}

.graphic-component.col-2.simple .capability-container{
  width: 100%;
}

.graphic-component.simple .complex .capability {
  width: 260px;
  padding-bottom: 0;
}

.graphic-component.col-2.simple .complex .capability {
  width: 100%;
  padding-bottom: 0;
}

.graphic-component.simple .complex .capability-bg {
  height: 129px;
  overflow: hidden;
}

.graphic-component.col-2.simple .complex .capability-bg {
  height: 100%;
  overflow: hidden;
}

.capability-bg.vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.capability-bg.vertical .reverse .flip-card-back,
.capability-bg.vertical .flip-card-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.graphic-component.simple .flip-card-inner {
  height: 129px;
}

.graphic-component.simple .cp-icon img {
  width: 260px;
  height: 129px;
}

.graphic-component.simple .flip-card:hover .flip-card-inner {
  transform: none;
}

.graphic-component.simple .flip-card-back {
  transform: none;
}

#main-content .graphic-component.simple .capability.cp-text h1 {
  font-size: 2.5rem !important;
  line-height: 1.2 !important;
}

body[class*="page-node-type"]
  .graphic-component.simple.has-complex
  .slick-dotted.slick-slider {
  height: auto;
}

.col-2 .capability,
.col-3 .capability {
  width: 100%;
}

.two-columns .col-2 .field--name-field-cp-graphic-components,
.two-columns .col-3 .field--name-field-cp-graphic-components {
  grid-template-columns: 250px 250px;
}

/****************** PORTRAIT *********************/
.graphic-component.portrait .field--name-field-cp-graphic-components {
  column-gap: 2rem;
  row-gap: 3rem;
  grid-template-columns: 1fr 1fr 1fr;
}

.portrait .capability {
  width: 300px;
  height: 450px;
  padding: 0;
}

/** WHITE BUTTON **/
#main-content .cp-link .secondary-button {
  background-color: #fff;
}

#main-content .graphic-component .javali-buttons.black {
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  /* .col-1 .field--name-field-cp-graphic-components {
    justify-content: center;
  } */

  .graphic-component.col-2 .field--name-field-cp-graphic-components .slick-list,
  .graphic-component.col-3
    .field--name-field-cp-graphic-components
    .slick-list {
    width: 280px;
    padding-left: calc((var(--doc-width) - 250px) / 2);
  }

  .gc-center {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .graphic-component {
    padding-top: 45px;
  }

  /*  .graphic-component .slick-slide {
      margin: 0 20px;
    }*/

  .graphic-component .gc-title,
  .graphic-component .gc-title .h2-size,
  .graphic-component .gc-title .h2-size *,
  .page-node-type-landing-page
    .node-content
    .graphic-component
    .gc-title
    .h2-size
    * {
    color: #313131;
    font-size: 24px;
    line-height: 32px !important;
  }

  .graphic-component .field--name-field-cp-graphic-components .slick-list {
    width: 280px;
  }

  .two-columns .node-body .gc-title.center {
    width: 100%;
    padding: 0;
  }

  .graphic-component .slick-arrow {
    bottom: -70px;
  }

  .gc-slick-prev.slick-arrow {
    left: 30%;
  }

  .gc-slick-next.slick-arrow {
    right: 30%;
  }

  body .flip-card:hover .flip-card-inner {
    transform: none;
  }

  .flip-card.active:hover .flip-card-inner {
    transform: rotateY(-180deg);
  }

  .graphic-component
    .field--name-field-cp-graphic-components.slick-slider.slick-dotted
    ul.slick-dots {
    display: none !important;
  }

  .tab-table .graphic-component .slick-arrow{
    top: unset;
    bottom: -25px;
  }

}

@media all and (max-width: 1119px) {
  .graphic-component:not(.default) .capability-container {
    width: 250px;
  }

  .graphic-component.portrait .capability-container {
    width: 300px;
  }

  .graphic-component:not(.default)
    .field--name-field-cp-graphic-components.slick-initialized {
    display: block;
  }

  .col-2 .field--name-field-cp-graphic-components:not(.slick-initialized) {
    grid-template-columns: 250px 250px;
  }

  .graphic-component.col-1 .capability-container {
    width: 100%;
  }

  .col-1 .capability {
    height: 125px;
    width: 250px;
  }

  .col-1 .field--name-field-cp-content-text {
    width: 250px;
    margin: auto;
  }

  .col-2 .capability.cp-image {
    height: 125px;
  }

  .graphic-component .slick-dots {
    bottom: -70px;
  }

  .graphic-component .slick-dots li {
    width: 48px;
    height: 48px;
    margin: 0 5px;
  }

  .graphic-component .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 48px;
    height: 48px;
    padding: 20px;
  }

  .graphic-component .slick-dots li button:after {
    width: 10px;
    height: 10px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1119px) {
  .graphic-component.col-2 .field--name-field-cp-graphic-components .slick-list,
  .graphic-component.col-3
    .field--name-field-cp-graphic-components
    .slick-list {
    padding-left: calc((var(--doc-width) - 540px) / 2);
  }

  .graphic-component.col-2 .field--name-field-cp-graphic-components .slick-dots,
  .graphic-component.col-3
    .field--name-field-cp-graphic-components
    .slick-dots {
    display: none;
  }

  .gc-center {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .graphic-component .field--name-field-cp-graphic-components .slick-list {
    width: 530px;
  }

  /*  .two-columns .field--name-field-cp-graphic-components .slick-slide{
      width: 265px;
    }*/

  .two-columns
    .graphic-component
    .field--name-field-cp-graphic-components
    .slick-list {
    width: 560px;
  }
}

@media all and (min-width: 1921px) {
  .capability.cp-icon svg {
    max-height: unset;
    height: 255px;
  }

  .simple .capability.cp-icon svg {
    max-height: unset;
    height: 166px;
    padding: 1.5rem 0;
  }

  .cp-icon img {
    width: 225px;
    height: 225px;
    object-fit: contain;
  }

  .two-columns .col-2 .field--name-field-cp-graphic-components {
    grid-template-columns: 335px 335px;
    column-gap: 5rem;
  }

  .two-columns .col-3 .field--name-field-cp-graphic-components{
    grid-template-columns: 335px 335px 335px;
    column-gap: 5rem;
  }

  .graphic-component.simple .flip-card-inner {
    height: auto;
  }

  .graphic-component.simple .complex .capability-bg {
    height: 167px;
    overflow: hidden;
  }

  .gc-center {
    width: var(--grid-wide);
  }

  .field--name-field-cpp-title {
    max-width: 250px;
  }

  .capability {
    width: 335px;
    height: 335px;
  }

  .graphic-component.simple .capability,
  .graphic-component.simple .complex .capability {
    width: 335px;
  }

  .graphic-component.col-2.simple .capability,
  .graphic-component.col-2.simple .complex .capability {
    width: 100%;
  }

  .one-column .graphic-component .slick-list {
    width: 100%;
  }

  .graphic-component.simple .field--name-field-cpp-text {
    height: 132px;
  }

  body[class*="page-node-type"]
    .graphic-component.simple
    .slick-dotted.slick-slider {
    height: 100% !important;
  }

  .flip-card-inner {
    height: 335px;
  }

  .graphic-component .capability-container,
  .graphic-component.simple .capability-container {
    width: 335px;
  }

  .capability-bg img,
  .graphic-component.simple .capability img {
    width: 100%;
  }

  .graphic-component.simple .field--name-field-cpp-title,
  .field--name-field-cpp-title {
    font-size: 1.875rem;
    line-height: 1.3em;
  }

  .field--name-field-cpp-text {
    /* font-size: var(--font-body-small) !important;
    line-height: var(--line-height-small); */
    line-height: var(--line-height-medium);
  }

  .graphic-component.simple .capability {
    padding-bottom: 100px;
  }

  .vertical .text-in-image {
    top: -167px;
  }

  .col-2.simple .field--name-field-cp-graphic-components {
    grid-template-columns: 1fr 1fr;
  }
  
  .col-3.simple .field--name-field-cp-graphic-components {
    grid-template-columns: 335px 335px 335px;
  }
  
  .col-4.simple .field--name-field-cp-graphic-components {
    grid-template-columns: 335px 335px 335px 335px;
  }  

}

@media all and (min-width: 3441px) {
  .capability.cp-icon svg {
    height: 340px;
  }

  .simple .capability.cp-icon svg {
    height: 250px;
    padding: 2rem 0;
  }

  .cp-icon img {
    width: 338px;
    height: 338px;
    object-fit: contain;
  }

  .two-columns .col-2 .field--name-field-cp-graphic-components {
    grid-template-columns: 503px 503px;
    column-gap: 7.5rem;
  }

  .two-columns .col-3 .field--name-field-cp-graphic-components{
    grid-template-columns: 503px 503px 503px;
    column-gap: 7.5rem;
  }

  .graphic-component.simple .flip-card-inner {
    height: auto;
  }

  .graphic-component.simple .complex .capability-bg {
    height: 250px;
    overflow: hidden;
  }

  .graphic-component.simple .field--name-field-cpp-title,
  .field--name-field-cpp-title {
    font-size: 2.8125rem;
    line-height: 1.3em;
  }

  .gc-center {
    width: var(--grid-4k);
  }

  .field--name-field-cpp-title {
    max-width: 375px;
  }

  .capability {
    width: 503px;
    height: 503px;
  }

  .graphic-component.simple .capability,
  .graphic-component.simple .complex .capability {
    width: 503px;
  }

  .one-column .graphic-component .slick-list {
    width: 100%;
  }

  .graphic-component.simple .field--name-field-cpp-text {
    height: 184px;
  }

  body[class*="page-node-type"]
    .graphic-component.simple
    .slick-dotted.slick-slider {
    height: 100% !important;
  }

  .flip-card-inner {
    height: 503px;
  }

  .graphic-component .capability-container,
  .graphic-component.simple .capability-container {
    width: 503px;
  }

  .capability-bg img,
  .graphic-component.simple .capability img {
    width: 100%;
  }

  .graphic-component.simple .capability {
    padding-bottom: 130px;
  }

  .vertical .text-in-image {
    top: -251px;
  }

  .col-2.simple .field--name-field-cp-graphic-components {
    grid-template-columns: 1fr 1fr;
  }
  
  .col-3.simple .field--name-field-cp-graphic-components {
    grid-template-columns: 503px 503px 503px;
  }
  
  .col-4.simple .field--name-field-cp-graphic-components {
    grid-template-columns: 503px 503px 503px 503px;
  } 
}