polished#rgba JavaScript Examples

Container = styled.div`
  display: grid;
  grid-template-rows:
    [tracks] 2rem
    ${rows.map(({ id, title }, index) => `[${id}] 1fr `)};
  grid-template-columns:
    [times] 2.5rem
    ${cols.map(({ id, title }, index) => `[${id}] 1fr `)};
  margin-bottom: 1rem;
  padding: 0.75rem;
  overflow-x: scroll;
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};

  > div {
    box-shadow: inset -1px -1px 0 ${({ theme }) => rgba(theme.primary, 0.1)};
  }
`

function ThumbnailOverlay({option, isQualified, hasIrrelevantWords}) {
  return (
    <Fill
      bg={
        // eslint-disable-next-line no-nested-ternary
        isQualified
          ? hasIrrelevantWords
            ? transparentize(0.1, theme.colors.danger)
            : rgba(87, 143, 255, 0.9)
          : rgba(89, 89, 89, 0.95)
      }
      borderRadius={['16px', '12px']}
    >
      {option && <FiCheck size={rem(20)} color={theme.colors.white} />}
    </Fill>
  )
}

function FailedThumbnail() {
  return (
    <Fill
      bg={rgba(89, 89, 89, 0.95)}
      borderRadius={['16px', '12px']}
      css={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <FiXCircle size={rem(20)} color={theme.colors.white} />
    </Fill>
  )
}

export default function ThemeContext () {
  const [colorMode, setColorMode] = useState(getColorMode())
  const editorTheme = editorThemes[colorMode].colors

  const theme = useMemo(() => {
    const bg = editorTheme['editor.background']
    const color = editorTheme['editor.foreground']
    const contrast = editorTheme['editorCursor.foreground']
    const borderColor = rgba(color, 0.1)
    const iconColor = rgba(color, 0.75)
    return { bg, borderColor, color, contrast, iconColor }
  }, [colorMode])

  return { colorMode, changeTheme: () => nextTheme(setColorMode), theme }
}

dark = deepFreeze({
  global: {
    colors: colors,
    drop: {
      background: '#333333'
    },
    focus: {
      border: {
        color: css(["", ";"], function (props) {
          return normalizeColor('focus', props.theme);
        }),
        width: '2px'
      }
    },
    font: {
      family: 'Arial'
    },
    input: {
      weight: 700
    }
  },
  anchor: {
    color: 'control'
  },
  layer: {
    background: backgroundColor,
    overlay: {
      background: rgba(48, 48, 48, 0.5)
    }
  }
})

colors = {
  active: rgba(102, 102, 102, 0.5),
  background: backgroundColor,
  black: '#000000',
  brand: '#FD6FFF',
  control: {
    dark: '#FFCA58',
    light: '#403216'
  },
  focus: '#FFCA58',
  icon: {
    dark: '#f8f8f8',
    light: '#666666'
  },
  placeholder: '#AAAAAA',
  text: {
    dark: '#eeeeee',
    light: '#444444'
  },
  white: '#FFFFFF'
}

UploadBox = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16rem;
  margin-bottom: 1rem;
  padding: 3rem 1rem;
  color: ${({ theme, error }) => (error ? '#f34a4a' : theme.textColorInactive)};
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  outline: 3px dashed ${({ theme }) => rgba(theme.textColorInactive, 0.4)};
  outline-offset: -0.75rem;
  cursor: pointer;

  h2 {
    font-size: ${fontSize.responsive.md};
  }

  &:hover {
    color: ${({ theme }) => theme.textColor};
    background: ${({ theme }) => lighten(0.1, theme.secondary)};
    outline-color: ${({ theme }) => theme.textColorInactive};
  }
`

UploadBoxSub = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 15rem;
  height: initial;
  padding: 1.5rem 1rem;
  color: ${({ theme, error }) => (error ? '#f34a4a' : theme.textColorInactive)};
  background: ${({ theme }) => theme.secondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  outline: 3px dashed ${({ theme }) => rgba(theme.textColorInactive, 0.4)};
  outline-offset: -0.75rem;
  cursor: pointer;

  h2 {
    font-size: ${fontSize.static.xs};
    text-align: center;
  }

  &:hover {
    color: ${({ theme }) => theme.textColor};
    background: ${({ theme }) => lighten(0.1, theme.secondary)};
    outline-color: ${({ theme }) => theme.textColorInactive};
  }

  @media ${device.max.xs} {
    width: 100%;
    height: 11rem;
    padding: 1rem;
  }
`

SearchContainer = styled.div`
  position: sticky;
  top: ${({ theme }) => theme.headerHeight};
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  background: linear-gradient(
    0deg,
    ${({ theme }) => rgba(theme.darksecondary, 0)} 0%,
    ${({ theme }) => rgba(theme.darksecondary, 0)} 30%,
    ${({ theme }) => rgba(theme.darksecondary, 1)} 50%
  );
`

ItemInfo = styled.figcaption`
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 100%;
  padding: 0.5rem;
  color: ${({ theme }) => theme.textColorInactive};
  background: ${({ theme }) => rgba(theme.darksecondary, 0.95)};
`

TripsNone = () => {
  console.log('blajkjbkajlds');
  return (
    <TripsNoneWrapper>
      <TripsNoneText>
        다시 여행을 떠나실 준비가 되면 에어비앤비가 도와드리겠습니다.{' '}
        <Link to="/help" target="_blank">
          <StButton btnType="underlined" padding="0" fontSize="1.5rem">
            자세히 알아보기
          </StButton>
        </Link>
      </TripsNoneText>
      <TripsNoneMainWrapper>
        <img src="https://etc-corporate.org/uploads/2019/05/Airbnb_Logo_B%C3%A9lo.svg_.png" />
      </TripsNoneMainWrapper>
      <TripsNoneButtonWrapper>
        <Link to="/">
          <Button
            color="black"
            padding="1.5rem 2.3rem"
            border="none"
            hover={`background: ${rgba(theme.color.black, 0.9)}`}
          >
            에어비엔비 둘러보기
          </Button>
        </Link>
      </TripsNoneButtonWrapper>
    </TripsNoneWrapper>
  );
}

UrlContainer = styled(Input)`
  color: ${({ theme }) => theme.textColor};
  background: ${({ theme }) => theme.darksecondary};
  border-radius: ${({ theme }) => theme.borderRadius};
  border: 1px solid ${({ theme }) => theme.placeholder};
  font-size: 1rem;
  font-weight: 500;
  overflow-x: scroll;
  white-space: nowrap;
  height: 2rem;

  &:hover,
  &:focus {
    border-color: ${({ theme }) => theme.logo};
    box-shadow: 0 0 1rem ${({ theme }) => rgba(theme.logo, 0.2)};
  }

  &.ant-input {
    width: 100%;
  }
`

defaultColorStyles = css`
  ${({ bgColor, stroke, ckType, checked, theme }) =>
    ckType
      ? checked
        ? css`
            color: ${theme.color.main};
            & > svg > path {
              stroke: ${theme.color.white};
            }
          `
        : css`
            color: ${rgba(theme.color.black, 0.5)};
            & > svg > path {
              stroke: ${theme.color.white};
            }
          `
      : css`
          color: ${theme.color[bgColor]};
          & > svg > path {
            stroke: ${theme.color[stroke]};
          }
        `}
`

StyledButton = styled(Button)`
  border: 1px solid ${({ theme }) => theme.placeholder};
  border-radius: ${({ theme }) => theme.borderRadius};
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: ${({ theme }) => theme.darksecondary};
  color: ${({ theme }) => theme.textColor};

  &:hover,
  &:focus {
    background: ${({ theme }) => theme.logo};
    color: ${({ theme }) => theme.darksecondary};
    border-color: ${({ theme }) => theme.logo};
    box-shadow: 0 0 1rem ${({ theme }) => rgba(theme.logo, 0.2)};
  }
`

ButtonSquare = styled(Button)`
  ${buttonStyles}

  background: ${({ theme }) => theme.secondary};

  &.ant-btn-primary {
    background: ${({ theme }) => theme.logo};
  }

  .anticon.anticon-loading.anticon-spin {
    padding: 0;
  }

  &:hover,
  &:active {
    opacity: 0.9;
  }

  &:active {
    box-shadow: inset 0 0 5px ${rgba('#000', 0.4)};
  }
`

ButtonSquareLink = styled(Link)`
  ${buttonStyles}

  padding: 0.25rem 0.75rem;
  background: ${({ type, theme }) =>
    type === 'primary' ? theme.logo : theme.darksecondary};

  &:hover,
  &:active {
    background: ${({ type, theme }) =>
      type === 'primary' ? theme.logoHover : theme.darksecondaryHover};
    box-shadow: inset 0 0 5px ${rgba('#000', 0.1)};
  }
`

baseStyles = css`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0.25rem;
  font-size: 1rem;
  background: transparent;
  border: none;
  border-radius: ${({ theme }) => theme.borderRadius};

  &:hover {
    background: ${({ theme }) => rgba(theme.primary, 0.1)};
  }
`

Info = styled.span`
  font-size: 1.4rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};

  &:not(:last-child) {
    margin-right: 2rem;
  }
`

Text = styled.p`
  font-size: 1.6rem;
  line-height: 1.5;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};
`

Text = styled.p`
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1.7;
  color: ${({ theme }) => rgba(theme.colors.text, 0.5)};
`

NavItem = styled.a`
  text-decoration: none;
  font-weight: 600;
  font-size: 1.6rem;
  margin-right: 2.5rem;
  position: relative;
  transition: color .25s ease;
  color: ${({ theme }) => theme.colors.text};


  &:last-child {
    padding-left: 2.5rem;
    color: ${({ theme }) => theme.colors.primary};

    &:focus,
    &:hover {
      color: ${({ theme }) => darken(0.15, theme.colors.primary)};
    }

    ${media.greaterThan('md')`
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: .1rem;
        background-color: ${({ theme }) => rgba(theme.colors.text, 0.5)};
      }
    `}

    ${media.lessThan('md')`
      padding-right: 0;
      font-size: 1.2rem;
      white-space: nowrap;
    `}
  }

  &:not(:last-child) {
    ${media.lessThan('lg')`
      display: none;
    `}

    &:before {
      content: ' ';
      position: absolute;
      height: .1rem;
      width: 0;
      bottom: -.5rem;
      left: 0;
      background: ${({ theme }) => theme.colors.text};
      transform: rotate(-1deg);
      transition: 100ms;
    }

    &:hover{
      &:before  {
        width: 100%;
      }
    }
  }
`

StyledCard = styled(Card)`
  .ant-card-body {
    display: flex;
    background: ${({ theme }) => rgba(theme.darksecondary, 0.5)};
    border-radius: ${({ theme }) => theme.borderRadius};
    padding: 0.75rem;
  }

  &.ant-card-hoverable {
    transition: 100ms;

    &:hover {
      background: rgb(0 0 0 / 30%);
      border-radius: ${({ theme }) => theme.borderRadius};
    }
  }

  &.ant-card-bordered {
    background: transparent;
    border: 0;
  }

  .ant-card-meta {
    width: 100%;

    .ant-card-meta-title {
      color: ${({ theme }) => theme.textColor};
      font-size: 1rem;
    }

    &-description {
      color: ${({ theme }) => theme.placeholder};
      font-weight: 500;
      font-size: 0.875rem;

      b {
        color: ${({ theme }) => theme.logo};
        font-weight: 600;
      }
    }
  }

  .ant-avatar {
    width: 3rem;
    height: 3rem;
  }
`

StyledPagination = styled(Pagination)`
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;

  .ant-pagination-prev,
  .ant-pagination-next {
    display: flex;
    align-items: center;

    .ant-pagination-item-link {
      ${baseStyles}

      color: ${({ theme }) => theme.primary};
      background: transparent;
    }
  }

  .ant-pagination-disabled {
    display: none;
  }

  .ant-pagination-item {
    ${baseStyles}

    font-weight: 600;

    &-active {
      border: 2px solid ${({ theme }) => rgba(theme.primary, 0.7)};
    }

    a {
      color: ${({ theme }) => theme.primary};
      font-weight: 600;
      font-size: 0.875rem;
    }
  }

  .ant-pagination-jump-next,
  .ant-pagination-jump-prev {
    ${baseStyles}

    .ant-pagination-item-link-icon {
      color: ${({ theme }) => theme.primary};
      font-size: 0.75rem;
    }

    .ant-pagination-item-ellipsis {
      position: absolute;
      top: -4px;
      right: 0;
      left: -4px;
      color: ${({ theme }) => theme.primary};
      font-size: 0.75rem;
    }
  }

  .anticon {
    display: flex;
    align-items: center;
  }
`

StyledTabs = styled(Tabs)`
  color: ${({ theme }) => theme.textColor};

  .ant-tabs-nav {
    margin-bottom: 0;

    .ant-tabs-ink-bar {
      height: 3px;
      background: ${({ theme }) => theme.textColor};
    }
  }

  .ant-tabs-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: ${({ tabwidth }) => tabwidth};
    height: ${({ tabheight }) => tabheight};
    padding: 0;
    font-size: 0.75rem;
    border-top-left-radius: ${({ theme }) => theme.borderRadius};
    border-top-right-radius: ${({ theme }) => theme.borderRadius};

    & + .ant-tabs-tab {
      margin: 0;
    }

    .ant-tabs-tab-btn {
      color: ${({ theme }) => theme.textColor};
    }

    /* Disabled button */
    &.ant-tabs-tab-disabled {
      .ant-tabs-tab-btn,
      .ant-tabs-tab-btn:active {
        color: ${({ theme }) => rgba(theme.textColor, 0.2)};
      }
    }

    /* Normal button */
    &:not(.ant-tabs-tab-disabled) {
      &:hover {
        color: ${({ theme }) => darken(0.2, theme.textColor)};
      }

      &.ant-tabs-tab-active {
        color: ${({ theme }) => theme.textColor};
        background: ${({ theme }) => theme.darksecondary};
      }

      &:not(.ant-tabs-tab-active):hover {
        background: ${rgba('#000000', 0.15)};
      }
    }
  }
`

MsgDetailLanguageModal = ({ modalState, onClickCloseModal }) => {
  return (
    <StPdfModal
      width="55rem"
      height="fit-content"
      modalState={modalState}
      setModalState={onClickCloseModal}
      header
    >
      <StPdfModalWrapper>
        <StPdfModalTitle>언어를 선택하세요</StPdfModalTitle>
        <StPdfModalSub>
          예약 세부정보가 저장되는 언어입니다. 나중에 인쇄할 수 있습니다.
        </StPdfModalSub>
        <StPdfModalRadioWrapper>
          <StPdfModalLabel>
            <StPdfModalText>선호하는 언어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" checked={true} />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>중국어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>영어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>프랑스어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>독일어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>이탈리아어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>일본어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>한국어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>포르투갈어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>러시아어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
          <StPdfModalLabel>
            <StPdfModalText>스페인어</StPdfModalText>
            <StPdfModalInput type="radio" name="lang" />
          </StPdfModalLabel>
        </StPdfModalRadioWrapper>
      </StPdfModalWrapper>
      <StModalFooter>
        <StForm method="get" action={scheduleDoc}>
          <Button
            type="submit"
            color="black"
            width="100%"
            height="4.5rem"
            hover={`background: ${rgba(theme.color.black, 0.9)}`}
            onClick={onClickCloseModal}
          >
            저장
          </Button>
        </StForm>
      </StModalFooter>
    </StPdfModal>
  );
}

styles = theme => ({
  root: {
    position: 'relative',
    display: 'inline-block',
    margin: 0,
    border: 'none',
    outline: 'none',
    padding: 0,
    textTransform: 'uppercase',
    textAlign: 'center',
    lineHeight: 1,
    fontSize: 14,
    color: theme.color.secondary.main,
    background: 'transparent',
    cursor: 'pointer',
    transition: 'color 250ms ease-out',

    '&:hover, &:focus': {
      color: theme.color.tertiary.main,

      '& $background': {
        backgroundColor: rgba(theme.color.tertiary.main, 0.125)
      },
      '& $path': {
        stroke: rgba(theme.color.tertiary.dark, 0.5)
      }
    }
  },
  background: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    backgroundColor: rgba(theme.color.secondary.main, 0.125),
    transition: 'background 250ms ease-out',
    opacity: ({ energy }) => energy.animate ? 0 : 1
  },
  frame: {
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
  svg: {
    display: 'block',
    width: '100%',
    height: '100%'
  },
  path: {
    fill: 'none',
    stroke: rgba(theme.color.secondary.dark, 0.5),
    strokeWidth: 2,
    vectorEffect: 'non-scaling-stroke',
    transition: 'stroke 250ms ease-out',
    opacity: ({ energy }) => energy.animate ? 0 : 1
  },
  main: {
    position: 'relative',
    padding: [8, 32]
  }
})

draw () {
    const { theme } = this.props;
    const { small } = getViewportRange();
    const width = this.element.offsetWidth;
    const height = this.element.offsetHeight;

    this.svg.setAttribute('width', width);
    this.svg.setAttribute('height', height);

    const boxWidth = Math.min(1000, width);
    const offset = small ? 5 : 20;
    const pit = small ? 5 : 10;

    const x1 = ((width - boxWidth) / 2);
    const x2 = ((width - boxWidth) / 2) + offset;
    const x3 = x2 + (boxWidth / 2);
    const x4 = x2 + boxWidth - (offset * 2);
    const x5 = x4 + offset;

    const backgroundColor = rgba(theme.color.background.dark, theme.color.alpha);
    const lineColor = rgba(theme.color.primary.dark, 0.5);

    const ground = {
      d: `M0,0 L${x1},0 L${x2},${pit} L${x4},${pit} L${x5},0 L${width},0 L${width},${height} L0,${height} L0,0`,
      fill: backgroundColor,
      stroke: backgroundColor
    };
    const line1 = {
      d: `M0,0 L${x1},0`,
      stroke: lineColor
    };
    const slash1 = {
      d: `M${x1},0 L${x2},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line2 = {
      d: `M${x2},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const line3 = {
      d: `M${x4},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const slash2 = {
      d: `M${x5},0 L${x4},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line4 = {
      d: `M${width},0 L${x5},0`,
      stroke: lineColor
    };

    const shapes = [ground, line1, slash1, line2, line3, slash2, line4];

    this.setState({ shapes });
  }

draw () {
    const { theme } = this.props;
    const { small } = getViewportRange();
    const width = this.element.offsetWidth;
    const height = this.element.offsetHeight;

    this.svg.setAttribute('width', width);
    this.svg.setAttribute('height', height);

    const boxWidth = Math.min(1000, width);
    const offset = small ? 5 : 20;
    const pit = height - (small ? 5 : 10);
    const double = small ? 0 : 12;

    const x1 = ((width - boxWidth) / 2);
    const x2 = ((width - boxWidth) / 2) + offset;
    const x3 = x2 + (boxWidth / 2);
    const x4 = x2 + boxWidth - (offset * 2);
    const x5 = x4 + offset;

    const backgroundColor = rgba(theme.color.background.dark, theme.color.alpha);
    const lineColor = rgba(theme.color.primary.dark, 0.5);

    const ground = {
      d: `M0,0 L${width},0 L${width},${height} L${x5},${height} L${x4},${pit} L${x3},${pit} L${x2},${pit} L${x1},${height} L0,${height} L0,0`,
      fill: backgroundColor,
      stroke: backgroundColor
    };
    const line1 = {
      d: `M0,${height} L${x1},${height}`,
      stroke: lineColor
    };
    const slash1 = {
      d: `M${x1},${height} L${x2},${pit} M${x1 - double},${height} L${x2 - double},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line2 = {
      d: `M${x2 - double},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const line3 = {
      d: `M${x4 + double},${pit} L${x3},${pit}`,
      stroke: lineColor
    };
    const slash2 = {
      d: `M${x5},${height} L${x4},${pit} M${x5 + double},${height} L${x4 + double},${pit}`,
      stroke: theme.color.tertiary.main,
      strokeWidth: 3
    };
    const line4 = {
      d: `M${width},${height} L${x5},${height}`,
      stroke: lineColor
    };

    const shapes = [ground, line1, slash1, line2, line3, slash2, line4];

    this.setState({ shapes });
  }

styles = theme => ({
  root: {
    flex: 1,
    position: 'relative',
    display: 'flex',
    margin: [0, 'auto'],
    maxWidth: 1000,
    width: '100%'
  },
  frame: {
    position: 'absolute',
    zIndex: 1,
    left: 10,
    right: 10,
    top: 0,
    bottom: 0,
    outline: `2px solid ${theme.color.background.dark}`,
    outlineOffset: 2,
    backgroundColor: rgba(theme.color.background.dark, theme.color.alpha)
  },
  content: {
    position: 'relative',
    zIndex: 2,
    flex: 1,
    margin: [10, 10, 10, 20],
    padding: [0, 10, 0, 0],

    '& > *:last-child, & > article > *:last-child': {
      marginBottom: 0
    }
  },

  '@media screen and (min-width: 768px)': {
    root: {
      minHeight: 1
    },
    frame: {
      left: 20,
      right: 20,
      top: 0,
      bottom: 0
    },
    content: {
      overflowX: 'hidden',
      overflowY: 'auto',
      margin: [30, 40, 30, 50],
      padding: [0, 10, 0, 0],

      '& img': {
        maxWidth: '80%'
      }
    }
  },

  '@media screen and (min-width: 1025px)': {
    content: {
      margin: [50, 60, 50, 70],
      padding: [0, 10, 0, 0]
    }
  }
})