@extends('layouts.base')
@section('content')
    <style>
        @media (min-width: 768px) {
            .col-md-7 {
                -ms-flex: 0 0 58.33333333%;
                flex: 0 0 58.33333333%;
                max-width: 58.33333333%;
            }

            .col-md-5 {
                -ms-flex: 0 0 41.66666667%;
                flex: 0 0 41.66666667%;
                max-width: 41.66666667%;
            }
        }

        .box-image {
            padding: 0px;
            height: auto;;
            overflow: hidden;
        }

        .box-image img {
            max-width: 100%;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            width: auto;
            object-fit: cover;
            height: auto;
            transition: 0.5s;
            overflow: hidden;
        }

        .blog-item {
            cursor: pointer;
            border: 1px solid #f5f8fa;
            border-radius: 10px;
            background: #f5f8fa;
            margin-top: 40px;
            margin-bottom: 40px;
            /* box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%); */
        }

        .blog-item:hover .box-image img {
            transform: scale(1.1);
        }

        .content {
            padding: 35px 25px;
        }

        .title {
            margin-top:15px;
            font-weight: 600;
            font-size: 25px;
            transition: 0.2s;
        }

        .title:hover {
            color: #FF603C;
        }
    </style>
    <header class="header section app-landing-2-header" style="background-color:white !important;" data-aos="fade-up">
        <div class="shapes-container">
            <!-- diagonal shapes -->
            <div class="shape shape-animated" data-aos="fade-down-right" data-aos-duration="1500" data-aos-delay="100"></div>
            <div class="shape shape-animated" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="100"></div>
            <div class="shape shape-animated" data-aos="fade-up-left" data-aos-duration="500" data-aos-delay="200"></div>
            <div class="shape shape-animated" data-aos="fade-up" data-aos-duration="500" data-aos-delay="200"></div>
            <!-- static shapes -->
            <div class="static-shape shape-ring shape-ring-1">
                <div class="animation animation--rotating"></div>
            </div>
            <div class="static-shape shape-ring shape-ring-2">
                <div class="animation animation--rotating-clockwise"></div>
            </div>
            <div class="static-shape pattern-dots-1"></div>
            <!-- main shape -->

        </div>
        <div class="container" style="padding-top:60px;">
            <div class="gap-y align-items-center text-center header-main">
                <h1 style="font-weight:600;">Blog</h1>
                <p style="font-weight:400; max-width:800px; color: #62676c; font-size:16px; margin:0 auto;">Přinášíme vám ty
                    nejlepší rady a články.</p>
            </div>
            <div style="margin-top:40px; margin-bottom:40px; padding-left:20px; padding-right:20px;">
                @foreach ($articles as $a)
                    <div class="row blog-item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease"
                        data-aos-duration="700" data-aos-delay="100">
                        <div class="col-md-5 box-image" style="border-radius: 10px;"><a href="/blog/{{ $a->url }}"><img src="{{ $a->image }}"
                                    alt="{{ $a->url }}"></a></div>
                        <div class="col-md-7">
                            <div class="content">
                                <a href="/blog/{{ $a->url }}"><h4 class="title">{{ $a->title }}</h4></a>
                                <div style="font-size:14px; color:#65676b; margin-top:25px;">RychléLajky.cz <span
                                        style="margin-left:5px; margin-right:5px;">/</span>
                                    edice {{ now()->year }}</div>
                                <div style="margin-top:30px; font-size:16px; color:#65676b;">
                                                                    </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

    </header>
@endsection