* {
    margin:0;
    padding:0;
}

@font-face {
    font-family: Variable;
    src: url("./assets/fonts/DMSans-VariableFont_opsz\,wght.ttf");
}

body {
    background-color:hsl(0, 0%, 90%);
    font-family: Variable;
    position:relative;
}

.full-content {
    display:grid;
    width:80vw;
    gap:1em;
    margin:2% auto;
    grid-template:1.2fr 0.4fr 0.6fr 1fr / repeat(4,20vw);
    grid-template-areas: 
    "g a a d"
    "g b c d"
    "h b c d"
    "h f e e";

}

.full-content > section {
    padding:2em;
    border-radius:0.5em;
    overflow: hidden;
}

.social, .grow {
    background-color: hsl(256, 67%, 59%);
    color:white;
}

.write, .maintain {
    background-color: hsl(39, 100%, 71%);
}

.manage, .faster {
    background-color:hsl(0, 0%, 100%);
}

img {
    height:5em; 
    max-width:100%;
    display:block;
}

.social {
    grid-area:a; 
    text-align: center;
}

.manage {
    grid-area:b;
    position:relative;
}

.manage > h2 {
    margin-top:2.5em;
}

.manage > img  {
    position:absolute;
    width:150%;
}

.maintain {
    grid-area:c;
    position:relative;
}

.maintain > img {
    position:absolute;
    height:12em;
}

.schedule {
    grid-area:d;
    background-color: hsl(254, 88%, 90%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position:relative;
}

.grow {
    grid-area:e;
    display:flex;
}

.faster {
    grid-area:f;
}

.create {
    grid-area:g;
    background-color: hsl(31, 66%, 93%);
}

.write{
    grid-area:h;
}

p {
    font-size:1em;
}

h2 {
    font-size:1.5em;
}

h1 {
    font-size: 3em;
}

.social > img {
    height:2em;
    margin:auto;
}

.create > h2, .write > h2, .faster > p {
    margin-bottom: 0.5em;
}

.create > img {
    width:100%;
}

.write > img {
    width:100%;
    height: fit-content;
} 

.faster > img, .manage > img {
    height:3em;
}

.schedule > img {
    position:absolute;
    height:20em;
    object-fit: cover;
    object-position: left;
    top:7em;
}

.grow > img {
    height:10em;
}

@media screen and (max-width:375px) {
    .full-content,.grow {
        display: flex;
        flex-direction: column;
    }

    .full-content {
        margin:5% auto;
    }

    .maintain {
        height:13em;
    }

    .schedule {
        height:23em;
    }

    .schedule > img {
        height:13em;
        width:fit-content;
    }
}