@extends('layout.main')

@section('title', __('strings.sponsors.title'))

<!-- ======================================================= -->
@section('content')

    <style media="screen">
        .logos-grid {
            display: flex !important;
            flex-wrap: wrap;
            justify-content: center;
        }
        .logos-grid .block {
            width: 22.5%;
        }
        @media ( max-width: 1366px ){
            .logos-grid .block {
                width: 30%;
            }
        }
        @media ( max-width: 800px ){
            .logos-grid .block {
                width: 46.5%;
            }
        }
        @media ( max-width: 600px ){
            .logos-grid .block {
                width: 48%;
            }
        }
        @media ( max-width: 480px ){
            .logos-grid .block {
                width: 95%;
            }
        }
    </style>

    <section id="article">
        @foreach ($sponsors_name as $name)
          @if(count($sponsors[$name]) > 0)
            <div class="main-title">
                <h1>{{ __("strings.sponsors.$name") }}</h1>
            </div>
            <div class="main-content logos-grid columns-4">
                @if(count($sponsors[$name]) < 1)
                    <div class="block">{{ __('strings.common.no_info') }}</div>
                @endif
                @foreach($sponsors[$name] as $sponsor)
                    <div class="block">
                        <img src="{{ asset($sponsor->image) }}" alt="">
                    </div>
                @endforeach
            </div>
          @endif
        @endforeach
    </section>

@endsection


<!-- ======================================================* -->

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/article.min.css') }}">
    <style>
        .logos-grid {
            display: grid;
            grid-gap: 20px;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        }

        @media(max-width: 1080px) {
            .logos-grid {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        }

        @media(max-width: 768px) {
            .logos-grid {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        @media(max-width: 480px) {
            .logos-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        .logos-grid .block {
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px 20px;
        }

        .logos-grid .block img {
            max-width: 100%;
            max-height: 200px;
        }
    </style>
@endpush

@push('scripts')
    <script>
        jQuery(function($) {

        });
    </script>
@endpush