.carousel-brands {
  position: relative;
  padding-bottom: 44px;
}

.carousel-brands  > button.slick-next.slick-arrow, .carousel-brands > button.slick-prev.slick-arrow {
  position: absolute;
  height: 44px;
  width: 44px;
  bottom: 0;
  overflow: hidden;
  text-indent: -400%;
  transition: background 0.8s ease-in-out;
}
.carousel-brands  > button.slick-next.slick-arrow {
  right: 10px;
  background: url(../assets/brands/arrows/right_arrow_red.svg) no-repeat center;
}

.carousel-brands > button.slick-prev.slick-arrow {
  right: 64px;
  background: url(../assets/brands/arrows/left_arrow_red.svg) no-repeat center;
}

.carousel-brands  > button.slick-next.slick-arrow.slick-disabled {
  background: url(../assets/brands/arrows/right_arrow_gray.svg) no-repeat center;
}

.carousel-brands > button.slick-prev.slick-arrow.slick-disabled{
  background: url(../assets/brands/arrows/left_arrow_gray.svg) no-repeat center;
}


div[class^="brands-container"] > .content {
  display: grid;
  grid-template-columns: repeat(2 , 1fr);
  grid-template-rows: repeat(5 , 70px);
  grid-column-gap: 40px ;
  grid-row-gap: 20px;
  padding: 0 35px;
}

.content {
  height: 100%;
  width: 100%;
  position: relative;
}

.content > li[class^="brand"]  {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -1000px;
  align-self: center;
  justify-self: center;
}

.brand-paramount {
  background: url(../assets/brands/paramount.svg);
  height: 90% !important;
}

.brand-microsoft {
  background: url(../assets/brands/microsoft.svg);
  height: 60% !important;
}

.brand-kpsnaks {
  background: url(../assets/brands/kpsnacks.svg);
}

.brand-bbc {
  background: url(../assets/brands/bbc.svg);
}

.brand-kerry {
  background: url(../assets/brands/kerry.svg);
  height: 60% !important;
}

.brand-visa {
  background: url(../assets/brands/visa.svg);
  height: 40% !important;
}

.brand-mira {
  background: url(../assets/brands/mira-showers.svg);
  height: 70% !important;
}

.brand-vodafone {
  background: url(../assets/brands/vodafone.svg);
  height: 60% !important;
}

.brand-mattel {
  background: url(../assets/brands/mattel.svg);
}

.brand-tourism {
  background: url(../assets/brands/tourism.svg);
}

.brand-bank-of-ireland {
  background: url(../assets/brands/bank_of_ireland.svg);
  height: 68% !important;
}

.brand-aviva {
  background: url(../assets/brands/aviva.svg);
  height: 50% !important;
}

.brand-ret {
  background: url(../assets/brands/ret.svg);
  height: 50% !important;
}

.brand-irsh-life {
  background: url(../assets/brands/irsh_life.svg);
  height: 60% !important;
}

.brand-bord-bia {
  background: url(../assets/brands/bord_bia.svg);
  height: 60% !important;
}

.brand-irish-distillers {
  background: url(../assets/brands/irish_distillers.svg);
}

.brand-national-lottery {
  background: url(../assets/brands/national_lottery.svg);
}

.brand-nba {
  background: url(../assets/brands/nba.svg);
  height: 55% !important;
}

.brand-disney {
  background: url(../assets/brands/disney.svg);
  height: 60% !important;
}

.brand-suntory {
  background: url(../assets/brands/suntory.svg);
  height: 50% !important;
}

@media screen and (min-width: 1000px) {
  div[class^="brands-container"] > .content {
    grid-template-columns: repeat(5 , 1fr);
    grid-template-rows: repeat(2 , 80px);
    grid-row-gap: 80px;
  }
  
  div[class^="brands-container"] > .content {
    padding: 0;
  }

  .brand-aviva {
    height: 40% !important;
  }
  
  .brand-kerry {
    height: 45% !important;
  }

  .brand-suntory {
    height: 35% !important;
  }
}