html,
body {
    padding: 0px;
    margin: 0px;
    overflow-wrap: break-word;
    scrollbar-width: none;
    font-family: "Roboto";
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: 20px;
    min-height: 100vh;
}

.card {
    padding: 15px;
    border: none;
}

.card1 {
    grid-column: span 1;
    grid-row: span 15;

    background: linear-gradient(135deg, #F7E9DD, #EED5C4);
}

.card2 {
    grid-column: span 2;
    grid-row: span 10;
    background: linear-gradient(135deg, #7B5CFF, #5A3EC8);
    color: white;
    text-align: center;
}

.card2 h1 {
    font-size: 50px;
}

.card3 {
    grid-column: span 1;
    grid-row: span 20;
    background: linear-gradient(135deg, #E3DBFF, #CFC2F5);
}

.card4 {
    grid-column: span 1;
    grid-row: span 10;
    background: linear-gradient(135deg, #FFFFFF, #F1F1F1);
}

.card4 img {
    height: 70px;
}

.card5 {
    grid-column: span 1;
    grid-row: span 10;
    padding-bottom: 0px;
    background: linear-gradient(135deg, #F9D976, #F4C15D);
}

.card6 {
    grid-column: span 1;
    grid-row: span 15;
    background: linear-gradient(135deg, #FFD978, #F6C85F);
}

.card7 {
    grid-column: span 1;
    grid-row: span 10;
    background: linear-gradient(135deg, #FFFFFF, #F8F8F8);
}

.card7 h1 {
    font-size: 50px;
}

.card8 {
    grid-column: span 2;
    grid-row: span 10;
    background: linear-gradient(135deg, #6F4CFF, #4B2FBF);
}

@media (max-width : 770px) {
    .container {
        display: flex !important;
        flex-direction: column !important;
    }

    .card1 {
        order: 6 !important;
    }
    .card2 {
        order: 0 !important;
    }
    .card3 {
        order: 3 !important;
    }
    .card4 {
        order: 1 !important;
    }
    .card5 {
        order: 2 !important;
    }
    .card6 {
        order: 7 !important;
    }
    .card7 {
        order: 5 !important;
    }
    .card8 {
        order: 4 !important;
    }
}

.create-post-img {
    height: 80px;
    width: 150px;
}