@extends('frontend.app')

@if(isset($seo))
@section('title'){{$seo['title']}}@endsection
@section('desc'){{$seo['desc']}}@endsection
@section('keywords'){{$seo['keywords']}}@endsection
@endif

@section('content')

    @include('frontend.inc_slider')
    @include('frontend.inc_kampusler')


    <main class="wrap">
        <div class="works" style="padding-top: 25px;">
            @foreach($galeriler as $galeri)
            <article>
                <a href="{{route('fResimGalerisiShow',$galeri->icerikId)}}">
                    <figure class="content">
                        <figcaption>
                            <h3>{{$galeri->icerik->baslik}}</h3>
                            <h2>{{$galeri->icerik->descreption}}</h2>
                        </figcaption>
                    </figure>
                    <div class="image">
                       <img src="/uploads/img/icerik/{{$galeri->resim}}" alt="BAŞLIK" title="DETAY>">
                    </div>
                </a>
            </article>
            @endforeach
        </div>
    </main>
    <div class="clearfix"></div>
@endsection


@section('css')
    <style>
    *,
    ::after,
    ::before {
    box-sizing: border-box
    }
    .wrap {
    float: left;
    width: 100%;
    margin: 0;
    min-height: calc(100vh - 241px);
    }

    .wrap .works {
    float: left;
    width: 100%
    }

    .wrap .works article {
    float: left;
    width: 33.33333%;
    position: relative;
    overflow: hidden
    }

    .wrap .works article:before {
    content: '';
    display: block;
    padding-top: 60%
    }

    .wrap .works article .content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    opacity: 0
    }

    .wrap .works article .content figcaption {
    position: absolute;
    bottom: 25px;
    left: 25px;
    max-width: 80%
    }

    .wrap .works article .content figcaption h3 {
    font-size: 12px;
    color: #fff;
    font-weight: 800;
    margin: 0 0 32px 0;
    position: relative;
    letter-spacing: 2px;
    }

    .wrap .works article .content figcaption h3:before {
    content: '';
    width: 40px;
    height: 2px;
    background: #000;
    position: absolute;
    bottom: -16px
    }

    .wrap .works article .content figcaption h2 {
    font-size: 24px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 3px
    }

    @media only screen and (max-width:480px) {
    .wrap .works article .content figcaption {
    left: 10px;
    bottom: 10px;
    max-width: 70%
    }
    .wrap .works article .content figcaption h2 {
    font-size: 18px
    }
    .wrap .works article .content figcaption h3 {
    margin: 0 0 15px 0
    }
    .wrap .works article .content figcaption h3:before {
    bottom: -8px
    }

    .wrap .pageTitle h1{
    font-size: 50px;
    }
    .wrap .pageTitle p{
    font-size: 15px;
    }

    }

    .wrap .works article .content:after {
    content: '';
    left: 0;
    bottom: 0;
    width: 120%;
    height: 100%;
    background: rgba(30, 48, 118, .9);
    position: absolute;
    z-index: -1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    -webkit-transform: rotate(31deg) translate(-50px, 50px);
    transform: rotate(31deg) translate(-50px, 50px)
    }

    .wrap .works article .image {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
    }

    .wrap .works article .image img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 0 0;
    object-position: 0 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in
    }

    .wrap .works article:hover .content {
    opacity: 1
    }

    .wrap .works article:hover .content:after {
    -webkit-transform: rotate(31deg) translate(0, 0);
    transform: rotate(31deg) translate(0, 0)
    }

    .wrap .works article:hover .image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
    }

    @media only screen and (max-width:480px) {
    .wrap .works article {
    width: 100%
    }
    .wrap .works article .content {
    opacity: 1
    }
    .wrap .works article .content:after {
    -webkit-transform: rotate(31deg) translate(0, 0);
    transform: rotate(31deg) translate(0, 0);
    background: rgba(236, 32, 40, .7)
    }
    .wrap .works article .image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
    }
    }

    @media only screen and (min-width:480px) and (max-width:1300px) {
    .wrap .works article {
    width: 50%
    }
    }

    @media only screen and (min-width:480px) and (max-width:1600px) {
    .wrap .works article .content figcaption h2 {
    font-size: 18px
    }
    }

    </style>
    @endsection
@section('js')

    @endsection