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

body {
    font-family: 'DM Sans', sans-serif;
    background-color: hsl(0, 0%, 93%);
    min-height: 100vh;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    width: 100%;
    max-height: 800px;
}

.card-create     { grid-column: 1;          grid-row: 1 / span 3; }
.card-hero       { grid-column: 2 / span 2; grid-row: 1 / span 2; }
.card-schedule   { grid-column: 4;          grid-row: 1 / span 4; }
.card-manage     { grid-column: 2;          grid-row: 3 / span 2; }
 
.card-consistent { grid-column: 3;          grid-row: 3 / span 2; }
.card-ai         { grid-column: 1;          grid-row: 4 / span 3; }
.card-audience   { grid-column: 2;          grid-row: 5 / span 2; }
.card-grow       { grid-column: 3 / span 2; grid-row: 5 / span 2; }

.card-create     { background-color: hsl(31, 66%, 93%); }
.card-hero       { background-color: hsl(256, 67%, 59%); }
.card-schedule   { background-color: hsl(254, 88%, 90%); }
.card-manage     { background-color: hsl(0, 0%, 100%); }
.card-consistent { background-color: hsl(39, 100%, 71%); }
.card-ai         { background-color: hsl(39, 100%, 71%); }
.card-audience   { background-color: hsl(0, 0%, 100%); }
.card-grow       { background-color: hsl(256, 67%, 59%); }

.card {
    border-radius: 10px;
    padding: 1.5rem;
    overflow: hidden;
}

.card img {
    width: 100%;
    height: auto;
    display: block;
}

/* _________________________________hero card______________________________________________________________ */
.card-hero {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-hero__title {
    font-size: 2.5rem;
    font-weight: 500;
    color: hsl(0, 0%, 100%);
    line-height: 0.935;
    letter-spacing: -2px;
}

.card-hero__title .yellow {
    color: hsl(39, 100%, 71%);
}

.card-hero__stars {
    margin-top: 1.5rem;
}

.card-hero__stars img {
    width: 8rem;
    height: auto;
}

.card-hero__reviews {
    color: hsl(0, 0%, 100%);
    font-size: 1.125rem;
    line-height: 1.11;
    margin-top: 0.5rem;
}

/* _________________________________create-card______________________________________________________________ */
.card-create {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.card-create__title {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -2px;
    color: hsl(0, 0%, 7%);
}

.card-create__title .purple {
    color: hsl(256, 67%, 59%);
    font-style: italic;
}

/* _________________________________schedule-card______________________________________________________________ */
.card-schedule {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.card-schedule__title {
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 0.875;
    letter-spacing: -2px;
    color: hsl(0, 0%, 7%);
}

.card-schedule img {
    width: 357px;
    height: 318px;
}

.card-schedule__desc {
    font-size: 0.8rem;
    line-height: 111%;
    letter-spacing: 0;
    font-weight: 400;
    color: hsl(0, 0%, 7%);
}

/* _________________________________manage-card______________________________________________________________ */
.card-manage {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1rem;
}

.card-manage img {
    width: 100%;
    height: auto;
}

.card-manage__title {
    font-size: 1.5rem;
    line-height: 111%;
    letter-spacing: 0;
    font-weight: 500;
    color: hsl(0, 0%, 7%);
}

/* _________________________________consistent-card______________________________________________________________ */
.card-consistent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-consistent__title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 0.875;
    letter-spacing: 0;
    color: hsl(0, 0%, 7%);
}

.card-consistent__img {
    width: 100%;
    height: auto;
    margin-bottom: -1.5rem;
}

/* _________________________________ai-card______________________________________________________________ */
.card-ai {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-ai__title {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 90%;
    letter-spacing: 0;
    color: hsl(0, 0%, 7%);
}

/* _________________________________audience-card______________________________________________________________ */
.card-audience {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-audience__stat {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 0.935;
    letter-spacing: -2px;
    color: hsl(0, 0%, 7%);
}

.card-audience__label {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.11;
    color: hsl(0, 0%, 7%);
}

.card-audience__img {
    width: 100%;
    height: auto;
    margin-top: auto;
}

/* _________________________________grow-card______________________________________________________________ */
.card-grow {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}

.card-grow__img {
    width: 50% !important;
    height: auto;
    flex-shrink: 0;
}

.card-grow__title {
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: 0;
    color: hsl(0, 0%, 100%);
    flex: 1;
}

/* ____________________________________________________________________________________________________________ */

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        max-height: none;

        grid-template-areas:
            "hero        hero"
            "manage      consistent"
            "schedule    schedule"
            "grow        grow"
            "audience    audience"
            "create      ai";
    }

    .card-create     { grid-column: auto; grid-row: auto; }
    .card-hero       { grid-column: auto; grid-row: auto; }
    .card-schedule   { grid-column: auto; grid-row: auto; }
    .card-manage     { grid-column: auto; grid-row: auto; }
    .card-consistent { grid-column: auto; grid-row: auto; }
    .card-ai         { grid-column: auto; grid-row: auto; }
    .card-audience   { grid-column: auto; grid-row: auto; }
    .card-grow       { grid-column: auto; grid-row: auto; }

    .card-create     { grid-area: create; }
    .card-hero       { grid-area: hero; }
    .card-schedule   { grid-area: schedule; }
    .card-manage     { grid-area: manage; }
    .card-consistent { grid-area: consistent; }
    .card-ai         { grid-area: ai; }
    .card-audience   { grid-area: audience; }
    .card-grow       { grid-area: grow; }

    .card-schedule img {
        width: 100%;
        height: auto;
    }

    .card-grow {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-grow__img {
        width: 60% !important;
    }
}

/* ______________________________________________________________________________________________________________ */

@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero"
            "manage"
            "consistent"
            "schedule"
            "grow"
            "audience"
            "create"
            "ai";
    }

    .card-grow {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-grow__img {
        width: 80% !important;
    }
}