/*  -----------------------------------------------------------------------------------------------
    Loop Posts Post Design Card
    @package v.1.1
--------------------------------------------------------------------------------------------------- */

.post-design-card
{
   &.entry-card
   {
       .entry-image-wrapper
       {
           position: relative;
           
           &:after
           {
               content: "";
               display: block;
               width: 100%;
               height: 100%;
               position: absolute;
               top: 0;
               bottom: 0;
               left: 0;
               right: 0;
               background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, $black 100%);
           }
       }

       .entry-content-inner
       {
            position: absolute;
            bottom: 48px; // because of margin bottom of post -- this is actually zero.
            padding: 24px 40px;
            background: transparent;

           .entry-header
           {

               .entry-title
               {
                   a
                   {
                       color: $white;
                       
                       &:hover
                       {
                           color: $accent_color;
                       }
                   }
               }
           }

           .entry-meta
           {
               color: $white;

               .meta-information
               {
                    a
                    {
                        color: $white;
                        
                        &:hover
                        {
                            color: $accent_color;
                        }
                        
                    }

                    svg
                    {
                        fill: $white;
                    }
               }

               .entry-reading-time
               {
                    svg
                    {
                        fill: $white;
                    }
               }
           }

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

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

                   &:hover
                   {
                       color: $accent_color;
                   }
               }
           }
       }
   }

   &:hover
   {
        .entry-image
        {
            .hover
            {
                top: 10% !important;
                transform: translate(-50%, 0);
            }
        }
   }
}