.brands-section {
    background: url('https://assets.corsair.com/image/upload/v1746758411/pages/careers/04_desktop_careers_benefits.png');
  background-position-x: center;
    text-align: center;
  color: #fff;
}

.brands-section .brands-content {
  padding: 80px 0 120px;
}

.brands-section .brands-content .section-title {
  font-size: 64px;
  font-weight: 600;
  line-height: 64px;
  margin-bottom: 8px;
}

.brands-section .brands-content .section-subtext {
  font-size: 21px;
  font-weight: 400;
  max-width: 1100px;
  margin: 0 auto 100px;
}

.brands-section .brands-content .hex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.brands-section .brands-content .hex-grid .hex-link {
  width: 248px;
  height: 267px;
  perspective: 1000px;
  text-decoration: none;
}

.brands-section .brands-content .hex-grid .hex-link .hex-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.brands-section .brands-content .hex-grid .hex-link .hex-flip .hex-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}

.brands-section .brands-content .hex-grid .hex-link .hex-flip .hex-face .hex-border {
  width: 100%;
  height: 100%;
  display: block;
}

.brands-section .brands-content .hex-grid .hex-link .hex-flip .hex-face .hex-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
}

.brands-section .brands-content .hex-grid .hex-link .hex-flip .hex-face .hex-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #fff;
  text-align: center;
}

.brands-section .brands-content .hex-grid .hex-link .hex-flip .back {
  transform: rotateY(180deg);
}

.hex-link:hover .hex-flip {
  transform: rotateY(180deg);
}

@media (hover: none) and (pointer: coarse) {
  .hex-link:hover .hex-flip {
    transform: none;
  }
}

@media (max-width:1440px) {
  .brands-section .brands-content .hex-grid {
    margin: 0 16px;
  }
}

@media (max-width:1024px) {
    .brands-section .brands-content .section-title {
        max-width: 90%;
        margin: auto;
    }
    .brands-section .brands-content .section-subtext {
        max-width: 90%;
    }
}

@media (max-width:768px) {
    .brands-section {
        background: url('https://assets.corsair.com/image/upload/v1746758355/pages/careers/04_mobile_careers_benefits.png');
        background-size: cover;
        background-position: center;
      }
    .brands-section .brands-content {
      padding: 56px 0;
    }
    .brands-section .brands-content .section-title {
        font-size: 40px;
        font-weight: 600;
        line-height: 44px;
    }
    .brands-section .brands-content .section-subtext {
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        margin: 0 auto 36px;
    }
    .brands-section .brands-content .hex-grid .hex-link {
        width: 176px;
        height: 189px;
    }
}