@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}



.card-wrapper{
    max-width: 90%;
    
    margin: 0 100px 25px;
    padding: 20px 10px;
    overflow: hidden;
}

.card-list .card-item {
    list-style: none;
}

.card-list .card-item .card-link {
user-select: none;
display: block;
background: #fff;
padding: 18px;
border-radius: 12px;
text-decoration: none;
border: 2px solid transparent;
box-shadow: 0 10px 10px rgba(0,0,0,.05);
transition: 0.2s ease;
}

.card-list .card-item .card-link:hover {
    border-color: #5372f0;
}

.card-list .card-link .card-image{
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.card-list .card-link .badge {
    color: #5372f0;
    padding: 8px 16px;
    font-size: .95rem;
    font-weight: 500;
    margin: 16px 0 18px;
    background: #dde4ff;
    width: fit-content;
    border-radius: 50px;
}
.card-list .card-link .badge.dos{
    color: #B22485;
    background: #F7Dff5;
}
.card-list .card-link .badge.tres{
    color: #B25A2B;
    background: #FFE3D2
}
.card-list .card-link .badge.cuatro{
    color: #205C20;
    background: #D6F8D6;
}
.card-list .card-link .badge.cinco{
    color: #856404;
    background: #fFf3cd;
}
.card-list .card-link .badge.seis{
    color: #048320;
    background: #c1dfc1;
}
.card-list .card-link .badge.siete{
    color: #03709f;
    background: #cfd1dd
}
.card-list .card-link .badge.ocho{
    color: #be1a1a;
    background: #de916e;
}
.card-list .card-link .badge.nueve{
    color: #850447;
    background: #cc859d;
}
.card-list .card-link .badge.diez{
    color: #b4c00e;
    background: #cedaa6;
}
.card-list .card-link .badge.once{
    color: #b84405;
    background: #FFE3D2
}
.card-list .card-link .badge.doce{
    color: #024138;
    background: #b1bbd1;
}
.card-list .card-link .badge.trece{
    color: #850404;
    background: #cbb3b3;
}
.card-list .card-link .badge.catorce{
    color: #0a04b3;
    background: #a5a7c1;
}
.card-list .card-link .badge.quince{
    color: #B25A2B;
    background: #FFE3D2
}

.card-list .card-link .card-title{
    display:block;
    width:100%;
    height:70px;
    font-size: 1.19rem;
    color: 0;
    font-weight: 600;
    text-align: left;
}

.card-list .card-link .card-button{
    height: 35px;
    width: 35px;
    color: #5372f0;
    border-radius: 50%;
    margin: 30px 0 5px;
    background: none;
    cursor: pointer;
    border: 2px solid #5372f0;
    transform: rotate(-45deg);
    transition: 0.4s ease;
}

.card-list .card-link:hover .card-button{
    color: #fff;
    background: #5372f0;
}

.card-wrapper .swiper-pagination-bullet{
    height: 13px;
    width: 13px;
    opacity: 0.5;
    background: #5372f0;
}

.card-wrapper .swiper-pagination-bullet-active{
   opacity: 1;
}

.card-wrapper .swiper-slide-button{
    color: #5372f0;
    margin-top: 5px;
}

@media screen and (max-width: 768px){
    .card-wrapper{
        margin: 0 10px 25px;
    }

    .card-wrapper .swiper-slide-button{
        display: none;
    }
    
}



.block {
  position: relative;
  margin: 2px auto 0;
  width: 80%;
  
  background: linear-gradient(0deg, #000, #272727);
}

.block:before, .block:after {
  content: '';
  position: absolute;
  
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
    #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: steam 20s linear infinite;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.block:after {
  filter: blur(50px);
}