:root {
    --purple50: hsl(260, 100%, 95%);
    --purple300: hsl(264, 82%, 80%);
    --purple500: hsl(263, 55%, 52%);
    --white: hsl(0, 0%, 100%);
    --grey100: hsl(214, 17%, 92%);
    --grey200: hsl(0, 0%, 81%);
    --grey400: hsl(224, 10%, 45%);
    --grey500: hsl(217, 19%, 35%);
    --darkblue: hsl(219, 29%, 14%);
    --black: hsl(0, 0%, 7%);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-size: 13px;
    font-family: "Barlow Semi Condensed", sans-serif;
    background: var(--grey100);
}

.item {
    margin: 1em 1em;
    border-radius: 10px;
}

.mainp{
    font-size: 0.9rem;
}

.item1 {
    padding: 2em 2em;
    background: var(--purple500);
    color: var(--white);
}

.section-head{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    gap: 1em;
}

img{
    border-radius: 50%;
    width: 3em;
}

.pattern{
    position: absolute;
    right: 15%;
    font-size: 2rem;
    opacity: .4;
}

h3{
    padding: 1em 0;
    font-size: 1.1rem;
}

.item2 {
    padding: 2em 2em;
    background: var(--grey500);
    color: var(--white);
}

.item3 {
    padding: 2em 2em;
    background: var(--white);
}

.item4 {
    padding: 2em 2em;
    background: var(--darkblue);
    color: var(--white);
}

.item5 {
    padding: 2em 2em;
    background: var(--white);
}


/* media queries */
@media only screen and (min-width: 800px) {
  main{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    margin: 3% auto;
  }

  .item1{
    grid-column: span 2;
  }

  .item4{
    grid-column: span 2;
  }

  .item5{
    grid-column: 4 / 5;
    grid-row: 4 / -2;
  }

  .item3{
    grid-column: 2 / 1;
  }

  .pattern{
    position: absolute;
    left: 35%;
  }
}