import { ICatalogueCard } from './CatalogueCard.interface'
import { colors } from '@/styles/variables'
import styled from 'styled-components'

export const StyledCatalogueCard = styled.div<Partial<ICatalogueCard>>`
  cursor: pointer;
  display: flex;
  aspect-ratio: 3.9/4.1;
  position: relative;
  color: ${colors.white};
  img {
    width: 100%;
    object-fit: cover;
  }

  button {
    position: absolute;
  }

  button {
    align-self: center;
  }
  &:hover {
    button {
      margin: 0 50px;
      &:before{
        transform: scaleX(1);
      }
    }
  }
`