.brands {
  margin-top: 2rem;
  margin-bottom: 2rem
}
@media (min-width: 1024px) {
  .brands {
    margin-top: 4rem;
    margin-bottom: 4rem
  }
}
.brands h2 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  max-width: 1280px;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 3rem;
  line-height: 1;
  font-weight: 300;
  line-height: 4.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}
:is(.brands h2) b {
  font-weight: 700
}
.brands .brands-grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  align-items: flex-start;
  padding-left: 1rem;
  padding-right: 1rem
}
@media (min-width: 1024px) {
  .brands .brands-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2rem
  }
}
@media (min-width: 1280px) {
  .brands .brands-grid {
    gap: 0px
  }
}
:is(.brands .brands-grid) .left {
  margin-right: auto
}
@media (min-width: 1024px) {
  :is(.brands .brands-grid) .left {
    grid-column: span 7 / span 7
  }
}
:is(:is(.brands .brands-grid) .left) .text-wrapper {
  margin-bottom: 1.5rem;
  display: flex;
  height: 100%;
  flex-direction: column
}
@media (min-width: 1024px) {
  :is(:is(:is(.brands .brands-grid) .left) .text-wrapper) .brand-text {
    padding-right: 3rem
  }
}
:is(:is(:is(.brands .brands-grid) .left) .text-wrapper) .brand-text {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(195 221 253 / var(--tw-text-opacity))
}
:is(:is(:is(.brands .brands-grid) .left) .text-wrapper) .orange-text {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 90 31 / var(--tw-text-opacity))
}
:is(:is(.brands .brands-grid) .left) .buttons {
  margin-top: 2rem;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem
}
@media (min-width: 768px) {
  :is(:is(.brands .brands-grid) .left) .buttons {
    margin-top: auto
  }
}
@media (min-width: 1024px) {
  :is(:is(.brands .brands-grid) .left) .buttons {
    margin-top: 3rem
  }
  :is(.brands .brands-grid) .right {
    grid-column: span 5 / span 5;
    margin-top: 0px;
    display: flex
  }
}
:is(:is(.brands .brands-grid) .right) figure {
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  max-height: 34.625rem;
  width: 100%;
  max-width: 35.875rem
}
:is(:is(:is(.brands .brands-grid) .right) figure) img {
  height: 100%;
  width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center
}
.brands .tabs-wrapper {
  margin-bottom: 1.5rem;
  overflow-x: auto
}
:is(.brands .tabs-wrapper) ul {
  display: flex
}
:is(.brands .tabs-wrapper) ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(3rem * var(--tw-space-x-reverse));
  margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)))
}
:is(.brands .tabs-wrapper) button {
  display: flex;
  height: 2.25rem;
  width: 7.75rem;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 1.5
}
.inactive:is(:is(.brands .tabs-wrapper) button) {
  opacity: 0.5
}