diff --git a/src/components/admin/partners/Partners.styled.tsx b/src/components/admin/partners/Partners.styled.tsx index a78ed6d53..ac98e5e30 100644 --- a/src/components/admin/partners/Partners.styled.tsx +++ b/src/components/admin/partners/Partners.styled.tsx @@ -1,7 +1,9 @@ +import Image from 'next/image' + import { Grid, Tabs, Typography } from '@mui/material' -import theme from '../../../common/theme' import { styled } from '@mui/material/styles' -import Image from 'next/image' + +import theme from '../../../common/theme' export const SectionTitle = styled(Typography)(() => ({ fontSize: theme.typography.pxToRem(24), @@ -32,17 +34,25 @@ export const Description = styled(Typography)(() => ({ export const StyledTabs = styled(Tabs)(() => ({ '& .MuiTabs-flexContainer': { justifyContent: 'space-around', - '@media only screen and (max-width: 900px)': { - justifyContent: 'space-between', - }, + + [theme.breakpoints.down('md')]: { justifyContent: 'space-between' }, }, })) export const StyledArrow = styled(Image)(() => ({ filter: 'invert(0%) sepia(83%) saturate(7500%) hue-rotate(347deg) brightness(85%) contrast(114%) opacity(50%)', + '&:hover': { filter: 'invert(91%) sepia(23%) saturate(3681%) hue-rotate(178deg) brightness(110%) contrast(102%)', }, + + '&.slick-prev': { + left: theme.spacing(-0.7), + }, + + '&.slick-next': { + right: theme.spacing(-0.7), + }, }))