/* -------------------------Como Funciona------------------------- */

.como-funciona-edit {
    .como-funciona-itens {
      display: flex;
      gap: 24px;
  
      .como-funciona-card {
        width: -webkit-fill-available;
        box-shadow: 0px 8px 12px #00000f1e;
        border-radius: 8px;
        overflow: hidden;
  
        .thumbnail {
          .components-button {
            height: 30px;
          }
  
          img {
            width: -webkit-fill-available;
            height: 210px;
            object-fit: cover;
          }
        }
  
        .text-content {
          padding: 16px 20px;
  
          h3 {
            margin: 0;
            color: #1d1d1b;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 8px;
          }
  
          p {
            margin: 0;
            color: #565654;
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 8px;
          }
  
          .input-Url {
            border-top: 1px solid #ebebeb;
            padding-top: 10px;
  
            label {
              margin: 0;
              margin-bottom: 4px;
              font-weight: 700;
              font-size: 12px;
              color: #383838;
            }
  
            input {
              border: 1px solid #ebebeb;
              padding: 6px 12px;
              width: 100%;
            }
          }
  
          .remove-item-btn {
            font-size: 16px;
            font-weight: 400;
            padding: 0;
          }
        }
      }
  
      .components-button {
        min-height: 33px;
        height: auto;
        padding: 0 5px;
        transition: 0.4s ease;
      }
      .components-button:hover {
        transform: scale(1.03);
      }
    }
  }


/* -------------------------Como Funciona front------------------------- */

.como-funciona {
    padding: 40px 0;
  
    .como-funciona-itens {
      display: flex;
      gap: 24px;
  
      .como-funciona-card {
        width: -webkit-fill-available;
        box-shadow: 0px 8px 12px #00000f1e;
        border-radius: 8px;
        overflow: hidden;
  
        .thumbnail {
          img {
            width: -webkit-fill-available;
            height: 282px;
            object-fit: cover;
          }
        }
  
        .text-content {
          padding: 16px 20px;
          display: grid;
          justify-content: space-between;
  
          h3 {
            margin: 0;
            color: #1d1d1b;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 8px;
          }
  
          p {
            margin: 0;
            color: #565654;
            font-size: 16px;
            font-weight: 400;
            margin-bottom: 8px;
          }
  
          .input-Url {
            a {
              display: flex;
              border: 1px solid #ebebeb;
              border-radius: 999px;
              padding: 6px 12px;
              font-size: 14px;
              width: fit-content;
              font-weight: 400;
              color: #30302e;
              align-items: center;
            }
          }
  
          .remove-item-btn {
            font-size: 16px;
            font-weight: 400;
            padding: 0;
          }
        }
      }
  
      .components-button {
        height: auto;
        padding: 0 5px;
        transition: 0.4s ease;
      }
      .components-button:hover {
        transform: scale(1.03);
      }
    }
  }