import React from 'react'
import styled from 'styled-components'

export default function DetailTitle({contentTitle, }) {
  return (
    <div className='flex-start'>
      <ContentTitleStyled>{contentTitle}</ContentTitleStyled>
    </div>
  )
}

const ContentTitleStyled = styled.p`
  position: relative;
  width: 100%;
  font-size: 1.6rem;
  font-weight: bold;
  color: #733c1d;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -11.5px;
    height: 1px;
    width: 100%;
    max-width: 100%;
    background-color: #f25430;
  }  
  &::before {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: -15px;
    height: 8px;
    width: 8px;
    margin-right: 1rem;
    background-color: #f25430;
  }
  
`