bodyCartas 
  {display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
   font-family: 'Poppins', sans-serif;
   color: #050500;
   background-color: #01013d;
  }

.containerCartas 
  {flex-grow: 1;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 10px;
   padding-right: 10px;
  }

.cards
  {display: grid;
   grid-template-columns: 200px;
   grid-gap: 32px;
   margin: 0;
   padding: 0;
   list-style: none;
  }

.cards__item 
  {height: 400px;
  }

.card 
  {position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #060606;
  
   &::before
     {content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: 20;
      width: 50%;
      height: 100%;
      background-color: rgba(#060606, 0.1);
      pointer-events: none;
     }
  
   &:nth-child(1) 
     {background-image: linear-gradient(45deg, #060606, #060606);
     }
  
   &:nth-child(2) 
     {background-image: linear-gradient(45deg, #060606, #060606);
     }
  
   &:nth-child(3)
    {background-image: linear-gradient(45deg, #060606, #060606);
    }
  }

.card__frame 
  {position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
  }

.card__picture
  {margin-bottom: 12px;
    filter: invert(0);
  
    img 
      {display: block;
       max-width: 100%;
       height: auto;
      }
  }

.card__title 
  {margin: 0;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 0.08em;
   text-transform: uppercase;
  }

.card__overlay 
  {position: absolute;
   bottom: 10px;
   right: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background-color: #ffffff;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(#000000, 0.2);
   transition: 0.5s;
   cursor: pointer;
  
   &::before 
     {content: "Dica";
      font-size: 13px;
      text-transform: uppercase;
      font-weight: 500;
      letter-spacing: 0.02em;      
     }
  
   &:hover,
   &:focus
     {bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      box-shadow: none;
      border-radius: 0;
      opacity: 0.9;
    
   &::before 
     {content: none;
     }
  }
  
 .card:nth-child(1) & 
   {background-image: linear-gradient(50deg, #550202, #550202);
   }
  
 .card:nth-child(2) & 
   {background-image: linear-gradient(50deg, #550202, #550202);
   }
  
.card:nth-child(3) & 
  {background-image: linear-gradient(50deg, #550202, #550202);
  }
  }

.card__content 
  {z-index: 1;
   padding: 20px;
   line-height: 1.4;
   opacity: 0;
   visibility: visible;
   box-sizing: border-box;
   pointer-events: none;
   transition: 0s;
  
   .card__overlay:hover ~ & 
     {opacity: 1;
      visibility: visible;
      transition: 0.2s 0.3s;
     }
  
    h2 
      {margin: 0;
       margin-bottom: 16px;
      }
  }