import styled from "styled-components";

export const LearnOuterWrapper = styled.div`
  height: 100%;
  width: 100%;
  padding-top: calc(48px + var(--toolbar-height));
  padding-bottom: var(--toolbar-height);
`;

export const LearnInnerWrapper = styled.div`
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "frond back"
    "tip answer";
  gap: 16px;
  padding: 0 16px;
`;
