ul.all-brand-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  list-style: none;
  margin: 3rem 0;
}
ul.all-brand-list .brand-card {
  border: 2px #b0b0b0 solid;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
ul.all-brand-list .brand-card a {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  font-size: 1.3rem;
  padding: 1rem 0;
}
ul.all-brand-list .brand-card a:hover {
  background-color: rgba(255, 255, 0, 0.394);
}
ul.all-brand-list .brand-card .logo {
    width: 200px;
    max-width: 100%;
}
ul.all-brand-list .brand-card .logo img {
    width: 200px;
    max-width: 100%;
    padding: 0 1rem;
}
ul.all-brand-list .meta {
  width: 100%;
}

/* Responsive Styles */
@media (max-width: 1400px) {
  ul.all-brand-list {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 1fr);
  }
}

@media (max-width: 1024px) {
  ul.all-brand-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(10, 1fr);
  }
}

@media (max-width: 768px) {
  ul.all-brand-list {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(10, 1fr);
    margin: 2rem 0;
  }
}

@media (max-width: 576px) {
  ul.all-brand-list {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(20, 1fr);
    margin: 1rem 0;
  }
}