body {
   background-image: linear-gradient(to bottom, #6946FF 0%, #A25EFF 100%);
}

.breadcrumb-item + .breadcrumb-item::before {
   color: #ffffff;
}

.post-busqueda {
   position: relative;
}

   .post-busqueda .btn {
      position: absolute !important;
      top: 3px;
      right: 5px;
      color: #ffffff;
      cursor: pointer;
      font-size: 20px;
      padding-left: 3px;
      padding-right: 3px;
   }

.searchform input {
   background-color: transparent;
   color: #ffffff;
   border: 2px solid #ced4da;
   border-radius: 20px;
   padding-right: 38px;
}


.card {
   margin: 0 1em;
   box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
   border: none;
   border-radius: 10px 10px 0px 0px;
   background-color: lightgray;
   text-align: center;
}

.card .card-body {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   background-color: #ffffff;
   min-height: 425px;
   text-align: center;
}

   .card .card-body .btn-post {
      position: absolute;
      top: 440px;
      border: none;
      background: #ffffff;
      color: #411889;
      font-weight: bold;
      border-radius: 15px;
      cursor: pointer;
      padding-left: 30px !important;
      padding-top: 1px;
      padding-bottom: 1px;
      display: inline-flex !important;
      align-items: center;
      left: calc(50% - 80px);
   }

      .card .card-body .btn-post:hover {
         color: #fff;
         background-color: #0d6efd;
         border-color: #0d6efd;
      }


      .card .card-body .btn-post::after {
         font-family: "bootstrap-icons";
         content: "\e820";
         padding-left: 20px !important;
         font-size: 25px;
      }

.card .card-title {
   justify-content: center;
   align-items: center;
   background-color: #D9D9D9;
   font-size: 18px;
   font-weight: bold;
   min-height: 80px;
   margin-bottom: 0px;
   border-radius: 10px 10px 0px 0px;
}


  .contenedor-articulos {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
  }
  .articulo {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 1%;
  }
  /* Pantallas pequeñas (menos de 600px) */
  @media (max-width: 599px) {
    .articulo {
      flex: 0 100%; /* 1 tarjeta por fila */
    }
  }
  /* Pantallas medianas (600px a 899px) */
  @media (min-width: 600px) and (max-width: 899px) {
    .articulo {
      flex: 0 48%; /* 2 tarjetas por fila, ajustando el porcentaje para márgenes */
    }
  }
  /* Pantallas grandes (900px o más) */
  @media (min-width: 900px) {
    .articulo {
      flex: 0 31%; /* 3 tarjetas por fila, ajustando el porcentaje para márgenes */
    }
  }