* {
    box-sizing: border-box;
}

body {
    font-family: "DM Sans";
    background-color: #f5f5f5;
    margin: 0;
}

:root {
    --purple-light: hsl(254, 88%, 90%);
    --purple-dark: hsl(256, 67%, 59%);
    --yellow-light: hsl(31, 66%, 93%);
    --yellow-dark: hsl(39, 100%, 71%);
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 7%);
    --primary-font: 18px;
}

.grid {
    margin: 50px auto;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
        'cre cre cre soc soc soc soc soc soc sch sch sch'
        'cre cre cre man man man pos pos pos sch sch sch'
        'wri wri wri man man man pos pos pos sch sch sch'
        'wri wri wri aud aud  aud follow follow follow follow follow follow';
    gap: 40px;
    overflow: hidden;
}

@media(max-width:767px) {
    .grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            'soc'
            'man'
            'pos'
            'sch'
            'follow'
            'aud'
            'cre'
            'wri';
        gap: 20px;
        margin-right: 10px;
        margin-left: 10px;
    }
}


.grid img {
    max-width: 100%;
}


.grid .create {
    grid-area: cre;
}

.grid .create p {
    margin-top: 70px;
    margin-bottom: 70px;
    font-size: 56px;
    line-height: 0.9;
    font-weight: 500;
    letter-spacing: -3px;
    max-height: 180px;
}


@media (max-width:767px) {
    .grid .create img {
        width: 200px;
    }

    .grid .create p {
        margin: 0 0 30px ;
        font-size: 30px;
        letter-spacing: -1px;
    }
}

.grid .social {
    grid-area: soc;
}

.grid .social .text {
    font-size: 80px;
    margin-bottom: 20px;
}

.grid .social img+p {
    font-size: 20px;
}

@media (max-width:767px) {
    .grid .social .text {
        font-size: 40px;
    }
}

.grid .schedule {
    grid-area: sch;
}

.grid .schedule p:first-child {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -1px;
}

.grid .schedule img {
    max-width: 180%;
}

.grid .schedule p:last-child {
    font-size: 25px;
}

@media(max-width:767px) {
    .grid .schedule p:first-child {
        font-size: 25px;
    }

    .grid .schedule p:last-child {
        font-size: 18px;
    }

    .grid .schedule img {
        max-width: 100%;
    }
}

.grid .write {
    grid-area: wri;
}

.grid .write p {
    margin: 20px 0 50px;
    font-size: 57px;
    line-height: 0.9;
    font-weight: 500;
    letter-spacing: -3px;
    max-height: 250px;
    max-width: 250px;
}

@media (max-width:767px) {
    .grid .write p {
        font-size: 33px;
        letter-spacing: -1px;
        margin: 10px 0 20px;
    }

    .grid .write img {
        width: 255px;
    }
}

.grid .manage {
    grid-area: man;
    overflow: hidden;
}

.grid .manage img {
    transform: translateX(50px);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
}

.grid .manage p {
    font-size: 45px;
    line-height: 0.9;
    font-weight: 500;
    letter-spacing: -1px;
}

.grid .post {
    grid-area: pos;
    overflow: hidden;

}

.grid .post p {
    font-size: 45px;
    font-weight: 500;
    line-height: 0.9;
    margin: 10px 0 0;
    letter-spacing: -1px;
    margin-bottom: -100px;
}

.grid .post img {
    transform: translateY(150px);
    -webkit-transform: translateY(150px);
    -moz-transform: translateY(150px);
    -ms-transform: translateY(150px);
    -o-transform: translateY(150px);
}

@media (max-width:767px) {
    .grid .manage img {
        max-width: 100%;
    }

    .grid .manage p,
    .grid .post p {
        font-size: 30px;

    }
}

.grid .audience {
    grid-area: aud;
}

.grid .audience span {
    font-size: 55px;
    font-weight: 600;
}

.grid .audience p {
    font-size: 25px;
}

@media (max-width:767px) {
    .grid .audience img {
        width: 200px;
    }
}

.grid .followers {
    grid-area: follow;
}

.grid .followers img {
    width: 300px;
    margin-right: 20px;
}

.grid .followers p {
    font-size: 45px;
    font-weight: 500;
    line-height: 0.9;
}

@media (max-width:767px) {
    .grid .followers img {
        width: 200px;
        margin: 0 0 10px 0;
    }

    .grid .followers p {
        font-size: 28px;
    }
}