/* ==========================================================
   SELECTED LOGOS — COLOUR SYSTEM
   ========================================================== */

body {
  background: #000;
  color: #fff;
}

.site-header {
  background: #000;
  color: #fff;
}

.site-footer {
  background: #000;
  color: #fff;
}


/* ==========================================================
   SELECTED LOGOS — GRID
   ========================================================== */

.logos-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0px;
}


/* ==========================================================
   SELECTED LOGOS — CARDS
   ========================================================== */

.logo-card {
  grid-column: span 4;

  display: flex;
  flex-direction: column;
}

.logo-card-wide {
  grid-column: span 8;
}


/* ==========================================================
   SELECTED LOGOS — IMAGE
   ========================================================== */

.logo-image {
  width: 100%;
  height: 420px;
  padding-top: 60px; 
padding-bottom: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-top: 1px solid currentColor;
}

.logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* ==========================================================
   SELECTED LOGOS — META
   Matches homepage project metadata
   ========================================================== */

.logo-meta {
  order: -1;

  display: grid;
  grid-template-columns: 1fr 1fr;

  margin-bottom: 5px;

  font-size: var(--type-small);
  line-height: var(--leading-small);
  letter-spacing: var(--tracking);
}

.logo-meta span:last-child {
  text-align: left;
}


/* ==========================================================
   SELECTED LOGOS — TABLET
   ========================================================== */

@media (max-width: 1199px) and (min-width: 768px) {

  .logo-card,
  .logo-card-wide {
    grid-column: span 6;
  }

  .logo-image {
    height: 300px;
    padding: 40px 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

}


/* ==========================================================
   SELECTED LOGOS — MOBILE
   ========================================================== */

@media (max-width: 767px) {

  .logo-card,
  .logo-card-wide {
    grid-column: 1 / 13;
  }

  .logo-image {
    height: 380px;
  }

}