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

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

const ContentTitleStyled = styled.p`
  font-size: 4rem;
  font-weight: bold;
  margin: 0 3rem 2rem 0;
  color: #733c1d;
  /* &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -11px;
    height: 1px;
    width: 100%;
    max-width: 100%;
    background-color: #d1e4e3;
  }  
  &::before {
    content: "";
    position: absolute;
    z-index: 10;
    left: 0;
    bottom: -15px;
    height: 8px;
    width: 1rem;
    margin-right: 1rem;
    background-color: #7D9D9C;
  } */
  
`

const Explanation = styled.p`
  font-size: 2.6rem;
  color: #733c1d;
`;