body.page-network_introduction article.node--type-network-introduction .view-page-image .views-field-field-image img {
  object-fit: contain;
}

/* ------------------------------------------------------------------------------------------------ */
body.front-page .block.block-views#block-twaslow-views-block-networks-block-1,
body.front-page .block.block-views#block-views-block-networks-block-1 {
  background-color: #fff;
  margin-bottom: 3rem;
  display: none;
}

.view-networks .view-content>p {
  color: #333;
  font-size: 14px;
  max-width: 420px;
  font-weight: 400;
  margin-left: 1rem;
  margin-right: 1rem;
}

.view-networks .networks-grid {
  display: grid;
  grid-template-areas:
    'tabs'
    'img'
    'details';
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 1rem 0 1rem;
}

@media (min-width: 1024px) {
  body.front-page .block.block-views#block-twaslow-views-block-networks-block-1,
  body.front-page .block.block-views#block-views-block-networks-block-1 {
    display: block;
  }

  .view-networks .view-content>p {
    width: 50%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 40px;
  }

  .view-networks .networks-grid {
    grid-template-areas:
      'tabs img'
      'details img';
    grid-template-columns: 1fr 3fr;
    margin: 2rem 0 0 0;
  }
}

.view-networks .networks-grid .network-tabs {
  grid-area: tabs;
  display: flex;
  flex-direction: column;
}

.view-networks .networks-grid .network-tabs button {
  background-color: transparent;
  font-size: 16px;
  font-weight: 400;
  color: var(--darkGrey);
  text-transform: uppercase;
  padding: .5rem 0rem .5rem 3.5rem;
  border: none;
  margin: .5rem 0;
  text-align: left;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 2.5rem 2.5rem;
  transition: color 500ms ease;
}

.view-networks .networks-grid .network-tabs button.homepage {
  display: none;
}

.view-networks .networks-grid .network-tabs button.members {
  background-image: url(../../images/icons/network_members.png);
}

.view-networks .networks-grid .network-tabs button.young {
  background-image: url(../../images/icons/network_young.png);
}

.view-networks .networks-grid .network-tabs button.partners {
  background-image: url(../../images/icons/network_partners.png);
}

.view-networks .networks-grid .network-tabs button.associated {
  background-image: url(../../images/icons/network_organizations.png);
}

.view-networks .networks-grid .network-tabs button.regional {
  background-image: url(../../images/icons/network_offices.png);
}

.view-networks .networks-grid .net-image {
  grid-area: img;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.view-networks .networks-grid .net-image .field--name-field-image {
  width: 100%;
  height: 100%;
}

.view-networks .networks-grid .net-image .field--name-field-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.view-networks .networks-grid .views-row {
  grid-area: details;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  margin-top: 1rem;
}

.view-networks .networks-grid .views-row .views-field-title {
  margin-bottom: .5rem;
  font-size: 18px;
  font-weight: 300;
  display: block;
  text-transform: uppercase;
}

.view-networks .networks-grid .views-row .views-field-field-subtitle {
  margin-bottom: 1rem;
}

.view-networks .networks-grid .net-image.show,
.view-networks .networks-grid .views-row.show {
  opacity: 1;
  pointer-events: all;
  transition: opacity 500ms ease;
}

.view-networks .networks-grid .network-tabs button.show {
  color: #999;
  transition: color 500ms ease;
}