/* Imagem de fundo alinhada à direita */
.problema-bg{
  position:relative;
  overflow:hidden;
}

.problema-bg::after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:50%;
  height:100%;
  background-image:url('../img/problema/fundo.png');
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
  opacity:.18;
  pointer-events:none;
  z-index:1;
}

.problema-bg .container{
  position:relative;
  z-index:2;
}

.problem-title{
  text-align:center;
  max-width:850px;
  margin:0 auto 50px;
}
.problem-title h2{color:#fff}

.problem-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.problem-card{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:.25s ease;
  aspect-ratio:1 / 1;
}
.problem-card:hover{
  transform:translateY(-5px);
  border-color:rgba(200,169,90,.45);
  background:rgba(200,169,90,.075);
}

.problem-image{
  flex:1;
  overflow:hidden;
  border-bottom:1px solid rgba(200,169,90,.22);
  background:#111;
}
.problem-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease, filter .35s ease;
  filter:brightness(.82) contrast(1.08);
}
.problem-card:hover .problem-image img{
  transform:scale(1.06);
  filter:brightness(.95) contrast(1.12);
}

.problem-card h3{
  font-family:'Outfit',sans-serif;
  font-size:18px;
  color:#fff;
  padding:16px 22px;
  line-height:1.25;
  min-height:102px;
  display:flex;
  align-items:center;
}

@media(max-width:1100px){
  .problem-grid{grid-template-columns:repeat(2,1fr)}
  .problema-bg::after{width:60%;opacity:.12}
}

@media(max-width:720px){
  .problem-grid{grid-template-columns:1fr}
  .problema-bg::after{width:100%;opacity:.08}
}