@import url("./components/common.css");
@import url("./components/social.css");
@import url("./components/footer.css");
@import url("./components/navbar.css");
@import url("./all.css");

.brand{
  padding: 20px 0px;
}
.brandWrapper{
  gap: 20px;
  flex-wrap: wrap;
}
.brandCard{
  width: 60%;
  box-shadow: 0px 1px 3px 1px var(--background-1);
  border-radius: 5px;
}
.cardLeft{
  flex: 1;
  display: flex;
  align-self: flex-start;
}
.cardImgContainer{
  height: 120px;
  background-color: var(--background-1);
  perspective: 400px;
  
}
.brandImg{
  width: 100%;
  height: 100%;
  transition: all 0.9s ease-in-out;
  object-fit: cover;
  border-top-left-radius: 5px;

}
.brandImg:hover{
  transform: rotateX(60deg);
}
.cardRight{
  flex: 3;
  padding: 0px 10px;
  background-color: var(--background-2);
  border-radius: 5px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cardRight article{
  color: var(--background);
  padding: 4px;
}

@media only screen and (max-width:1024px) {
  .brandCard{
    width: 90%;
  }
}
@media only screen and (max-width:576px) {
  .brandCard{
    width: 100%;
  }
}
@media only screen and (max-width:480px) {
  .brandCard{
    flex-direction: column;
  }
  .cardLeft{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cardImgContainer{
    height: unset;
    width: 100%;
  }
  
}