import styled, { css } from 'styled-components';

import { ICard } from './Card.interface';

export const StyledFigure = styled.figure<ICard>`
  position: relative;
  margin-bottom: 24px;

  picture{
    border-radius: 12px;
    overflow:hidden;

    & img{
      transition: opacity 0.6s, transform 0.6s;
      backface-visibility: hidden;
    }
  }
  figcaption{
    padding-top: 12px;

    & h3{
      transition: all 0.6s;
    }
  }

  &:hover{
    & picture{
      img{
        opacity: 0.4;
        transform: scale3d(1.1,1.1,1);
      }
    }
     & figcaption{
      & h3{
        text-decoration: underline;
      }
     }
  }
`;

export const StyledFigcaption = styled.figcaption<ICard>`

`;