:root{
    --davys-gray: #545664ff;
--robin-egg-blue: #43D2D2ff;
--united-nations-blue: #529DF0ff;
--taupe-gray: #918F9Cff;
--seasalt: #FAFAFAff;
--indian-red: #e0252c;
--platinum: #E0DEDDff;
--white: #ffffff;
--hunyadi-yellow: #F0B156ff;
}
@font-face {
    font-family: "Poppins";
    src: url('fonts/Poppins-Medium.ttf');
}
@font-face {
    font-family: 'light';
    src: url(fonts/Poppins-Light.ttf);
}
*{
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
}
h1,h2,p{
    margin: 0;
    padding: 0; 
}
p{ font-family: 'light';
    font-weight: 500;
}
.container{
    display: grid;
    place-items: center;
    height: 100vh;
    max-width: 475px;
    background-color: var(--seasalt);
    color: var(--taupe-gray);
   
}
.container .text span{
    display: inline-block;
    margin-top: 50px;
    font-size: 1.8em;
    font-family: "light", sans-serif;
    
}
.container .text{
    text-align: center;
    padding-bottom: 20px;
}
.container .text p{
    margin: 10px 20px 40px 20px
}
.container h1, h2{
    color: var(--davys-gray);
}
.wrapper{
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(250px, auto));
    max-width: 360px;
}
.wrapper .one, .two, .three, .four{
    background-color: var(--white);
    padding: 30px;
    position: relative;
    border-radius: 10px;
    box-shadow: 4px 4px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}
.wrapper .one{
    border-top: 4px solid var(--robin-egg-blue);
}
.wrapper .one img{
 position: absolute;
 top: 140px;
 left: 270px;
}
.wrapper .two{
    border-top: 4px solid var(--indian-red);
}
.wrapper .two img{
 position: absolute;
 top: 140px;
 left: 270px;
}
.wrapper .three{
    border-top: 4px solid var(--hunyadi-yellow);
}
.wrapper .three img{
 position: absolute;
 top: 140px;
 left: 270px;
}
.wrapper .four{
    border-top: 4px solid var(--united-nations-blue);
}
.wrapper .four img{
 position: absolute;
 top: 140px;
 left: 270px;
}
@media screen and (min-width: 1140px){
    .container{
        height: auto;
        max-width: 120em;
       background-size: cover;
    }
    .wrapper{
        display: grid;
        place-content: center;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        column-gap: 20px;
        grid-auto-rows: repeat(2, minmax(300px, auto));
        max-width: 1200px;
        min-height: 160px;
       
    }
    .wrapper .one{
        grid-column: 1/2;
        grid-row: 1/2;
        transform: translateY(50%);
       height: 220px;
    }
    .wrapper .one img{
     top: 180px;
    }
    .wrapper .two{
       grid-column: 2/3;
       grid-row: 1/2;
       height: 220px;
    }
    .wrapper .two img{
     top: 180px;
    }
    .wrapper .three{
        grid-column: 2/3;
        grid-row: 2/3;
        height: 220px;
    }
    .wrapper .three img{
     top: 180px;
    }
    .wrapper .four{
        grid-column: 3/4;
        grid-row: 1/2;
        transform: translateY(50%);
       height: 220px;
        
    }
    .wrapper .four img{
     top: 180px;
    }
    
}
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }