import styled from "styled-components";
import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";

const CardSection = styled.section`

  h6 {
    color: ${colors.orange1};
  }

  display: flex;
  flex-flow: row wrap;
  padding: 2rem 1rem;

  @media screen and (max-width: ${breakpoints.mobile}) {
    flex-flow: column nowrap;
  }

  & > aside {
    margin-left: auto;
  }

  & > * {
    width: calc(20% - 2rem);

    @media screen and (min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.medium}) {
      width: calc(50% - 2rem);
      margin-bottom: 2rem;
    }

    @media screen and (max-width: ${breakpoints.mobile}) {
      width: 100%;
      margin: 0 0 3rem 0;
    }
  }
`;

export default CardSection;
