import { darkLine } from '@/styles/colors';
import { paddedMainContentWidth } from '@/styles/dimensions';
import styled from '@emotion/styled';

const Section = styled.section`
  padding: 80px 0 40px 0;
  position: relative;
  z-index: 2;
  width: 100svw;
  > img {
    padding: 0;
    margin-bottom: 20px;
    width: 100%;
    height: auto;
  }
  transition:
    top 0.5s ease,
    opacity 0.5s ease;
  p {
    font-weight: 300;
  }
  p strong {
    font-weight: 500;
  }
  border-bottom: 1px solid ${darkLine};

  @media screen and (min-width: 750px) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    margin: 0;
    > * {
      width: 100%;
      max-width: ${paddedMainContentWidth};
    }
    p {
      max-width: 620px;
    }
  }
  @media screen and (min-width: 1200px) {
    text-align: left;
    margin: 0;
    padding: 120px 20px;
    flex-direction: row;
    justify-content: center;
    &:nth-of-type(even) {
      flex-direction: row-reverse;
    }
    > * {
      margin: 0 20px;
    }
  }
`;

export const SectionContent = styled.div`
  h1,
  h2,
  h3 {
    font-family: Architekt;
  }
  display: contents;
  > * {
    padding: 15px 20px;
  }
  @media screen and (min-width: 750px) {
    > * {
      width: 100%;
      max-width: 750px;
    }
  }
  @media screen and (min-width: 1200px) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
    display: block;
  }
`;

export default Section;