/*
# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

### Primary

- Red: hsl(0, 78%, 62%)
- Cyan: hsl(180, 62%, 55%)
- Orange: hsl(34, 97%, 64%)
- Blue: hsl(212, 86%, 64%)

### Neutral

- Very Dark Blue: hsl(234, 12%, 34%)
- Grayish Blue: hsl(229, 6%, 66%)
- Very Light Gray: hsl(0, 0%, 98%)

## Typography

### Body Copy

- Font size: 15px

### Fonts

- Family: [Poppins](https://fonts.google.com/specimen/Poppins)
- Weights: 200, 400, 600
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background-color: hsl(0, 0%, 98%);
}
h2{
 font-family: 'Roboto', sans-serif;
 font-weight: 500;
}
.header{
 width: 60%;
 margin: 0 auto;
 text-align: center;
 padding: 20px;
 margin-top: 10px;
}
.header p:last-child{
 width: 62%;
 margin: 0 auto;
 font-size: 14px;
}
.header p:first-child{
 font-size: 31px;
}
.header h1 {
 margin-bottom: 12px;
}
.container{

 width: 83%;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(3, 30%);
 grid-template-rows: repeat(3, 130px);
 row-gap: 20px;
 justify-content: space-between;
}
.cards{
 
 height: 200px;
 box-shadow: 0 1.3rem 1.5rem 0 rgba(216, 226, 236, 0.7);
 padding: 10px 0px 10px 17px;
 border-radius: 5px;
 position: relative;
}
.one{
 grid-column: 1;
 grid-row: 2;
 border-top: solid hsl(180, 62%, 55%) 4px;
}
.two{
 grid-column: 2;
 border-top: solid hsl(0, 78%, 62%) 4px;
}
.three{
 margin-top: 80px;
 grid-column: 2;
 grid-row: 2;
 border-top: solid hsl(34, 97%, 64%) 4px;
}
.four{
 grid-row: 2;
 grid-column: 3;
 border-top: solid hsl(212, 86%, 64%) 4px;
}
.cards h3{
 margin-bottom: 5px;
}
.cards p{
 font-size: 14px;
 width: 86%;
}
.cards img{
  position: absolute;
  top: 110px;
  right: 15px;
}
@media screen and (max-width: 790px){
 .container{
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
 }
 .header{
  width: 93%;
  margin-bottom: 50px;
 }
 .header p:last-child{
  font-size: 20px;
  width: 100%;
 }
 .cards{
  width: 90%;
  margin: 0 auto;
  margin-bottom: 15px;
 }
 .cards p{
  font-size: 16.5px;
 }
}