/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
/* block grid 1 */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-bottom: 3rem; }

.div1 {
  grid-area: 1 / 1 / 3 / 2; }

.div2 {
  grid-area: 1 / 2 / 2 / 3; }

.div3 {
  grid-area: 2 / 2 / 3 / 3; }

.div4 {
  grid-area: 1 / 3 / 3 / 4; }

@media (max-width: 568px) {
  .parent {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    /* grid-template-rows: auto auto 1fr 1fr 1fr auto auto; */
    grid-column-gap: 2px;
    grid-row-gap: 2px; }
  .div1 {
    grid-area: 2 / 1 / 3 / 2; }
  .div2 {
    grid-area: 1 / 1 / 2 / 2; }
  .div3 {
    grid-area: 1 / 2 / 2 / 3; }
  .div4 {
    grid-area: 2 / 2 / 3 / 3; } }