/*  -----------------------------------------------------------------------------------------------
    Loop Posts Post Design Magzine
    @package v.1.0.0
--------------------------------------------------------------------------------------------------- */

.post-design-magazine
{    
   &.entry-card
   {
       .entry-image-wrapper
       {
           position: relative;
           
           &:before
           {
               content: '';
               background: $accent_color;
               position: absolute;
               z-index: 2;
               left: 0;
               bottom: -100px;
               transform: skewY(-5deg);
               width: 100%;
               height: 150px;
               transition: background .25s;
           }

           .icon-round
           {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 48px;
                height: 48px;
                background: $accent_color;
                border-radius: 50%;
                position: absolute;
                z-index: 4;
                bottom: 24px; // half of height
                left: 50%;
                transform: translate(-50%, 0);
                transition: background .25s;
               
               &:after
               {
                   content: "";
                   mask-image: url('images/svg/article.svg');
                   background-color: $white;
                   width: 24px;
                   height: 24px;
                   display: block;
               }
           }
       }

       .entry-content-inner
       {
           background: $accent_color;
           padding: 0 40px 24px;
           
           @include media('<=tablet')
           {
             padding: 0 24px 24px;
             border: none;
             max-width: 100%;
           }

           .entry-header
           {
               @include media('<=tablet')
               {
                   margin-top: 0;
               }
                               
               .entry-title
               {
                   a
                   {
                       color: $white;
                   }
               }
           }

           .entry-meta
           {
               svg
               {
                   fill: $white;
               }

               color: $white;

               .meta-information
               {
                    a
                    {
                        color: $white;
                    }
               }
           }
           
           .entry-content 
           {
               p
               {
                   color: $white;
               }
           }

           .entry-footer
           {
               .post-edit-link
               {
                    color: $white;
                    
                   &:before
                   {
                       background-color: $white;
                   }
               }
           }
       }
   }

   &:hover
   {
       .entry-image-wrapper
       {
           &:before
           {
               background: $black;
           }

           .icon-round
           {
               background: $black;
           }
       }

       .entry-content-inner
       {
           background: $black;
           
           .entry-title
           {
               a
               {
                   color: $white;
               }
           }

           .entry-content 
           {
               p
               {
                   color: $white;
               }
           }
       }
   }
}