:root {
  --brand-gap: 1rem;
  --brand-hero-gap: 1rem;
  --brand-gallery-gap: 1rem;
  --brand-gallery-columns: 2;
  --brand-width: 17rem;
  --brand-shadow: var(--shadow-large);
  --brand-transform: var(--card-transform);
  --brand-background: var(--color-white);
}

  @media (min-width: 768px) {:root {
    --brand-gap: 2rem;
    --brand-hero-gap: 4rem;
    --brand-gallery-gap: 2rem;
    --brand-gallery-columns: 3
}
  }

/**
 * Tease
 */

.brand {
  position: relative;
  transition: var(--transition-fast);
  box-shadow: none;
  max-width: 17rem;
  max-width: var(--brand-width);
  background-color: var(--color-white);
}

.brand:hover {
  box-shadow: var(--shadow-large);
  box-shadow: var(--brand-shadow);
  transform: var(--card-transform);
  transform: var(--brand-transform);
}

/**
 * Single
 */

.single-brand .link {
  margin-top: 2.5rem;
}

.single-brand .link svg {
  transform: rotate(90deg);
  max-width: 14px;
  margin-right: 1rem;
}

.brand-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--brand-hero-gap);
  gap: var(--brand-hero-gap);
}

@media (min-width: 768px) {

.brand-hero {
    flex-direction: row
}
  }

.brand-hero-image {
  background: var(--color-white);
  background: var(--brand-background);
  flex: 0 1 40%;
  display: flex;
  justify-content: center;
}

.brand-hero-content {
  flex: 1 1 60%;
  max-width: 32rem;
}

.brand-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-columns: repeat(var(--brand-gallery-columns), 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--brand-gallery-gap);
  gap: var(--brand-gallery-gap);
}

.brand-gallery > img {
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 1.70;
  }

/**
 * Block
 */

.brands-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  grid-gap: 1rem;
  gap: 1rem;
  grid-gap: var(--brand-gap);
  gap: var(--brand-gap);
}

.brand-image {
  background: var(--color-white);
  background: var(--brand-background);
  padding: 1rem;
  padding: var(--brand-gallery-gap);
}

@media (min-width: 768px) {

.brand-image {
    --brand-gallery-gap: 0 2rem 1rem
}
  }

.brand-image img {
    aspect-ratio: 2 / 1;
    -o-object-fit: contain;
       object-fit: contain;
  }

.brand-link {
  display: flex;
  justify-content: center;
  grid-gap: .5rem;
  gap: .5rem;
  text-decoration: underline;
  font-size: .75rem;
}

.brand-link svg {
    width: .625rem;
  }