@section('title', '| Pago de Expensas')

@section('guest-head')
<style>
.slider {
    height: 250px;
    margin: 20px auto auto auto;
    position: relative;
    width: 95%;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.slide-track {
    display:flex;
    width: calc(180px * 68);
    animation: scroll 50s linear infinite;
}

.slide-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 34));
    }
}

.slide {
    height: 142px;
    width: 250px;
    display: flexbox;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

.img-slider {
    width: 100%;
    transition: transform 1s;
}

.img-slider:hover {
    transform: translateZ(20px);
    border: 1px solid #BEDAFD;
    box-shadow: 5px 5px 40px #304d9a;
}

/* Gradient Shadows */

.slider::before,
.slider::after
{
    background: linear-gradient(to right, rgba(219, 234, 254, 1) 0%, rgba(219, 234, 254, 0) 100%);
    content: '';
    height: 100%;
    position: absolute;
    width: 15%;
    z-index: 2;
}

.slider::before
{
    left: 0;
    top: 0;
}

.slider::after
{
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

</style>
@endsection

<x-guest-layout>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">

                 <x-statics.payments />

            </div>
        </div>
    </div>

</x-guest-layout>