*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
--Purple-100: #dacffc;
--Purple-500: hsl(256, 67%, 59%);
--Yellow-100: #f9eee1;
--Yellow-500: #ffcb6b;
--White: #ffffff;
--Black: #121212;
}

body{
    font-family: 'specimen', sans-serif;
   background-color: var(--White);
}
.bento-section{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(5,1fr);
    gap: 30px;
    width:100%;
    max-width: 1400px;
    margin: 20px auto;
    padding: 20px;
    /* border: 2px solid red; */
}
#item1{
    grid-column: 3/7;
    grid-row: 1/3;
}
#item4{
    grid-column: 7/9;
    grid-row: 1/5;
}
#item7{
    grid-column: 1/3;
    grid-row: 1/4;
}
#item8{
    grid-column: 1/3;
    grid-row: 4/7;
}
#item5{
    grid-column: 5/9;
    grid-row: 5/7;
}
#item6{
    grid-column: 3/5;
    grid-row: 5/7;
}
#item3{
    grid-column: 5/7;
    grid-row: 3/5;
}
#item2{
    grid-column:3/5;
    grid-row: 3/5;
}
.social-media{
    background-color: var(--Purple-500);
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    flex-direction: column;
}
.social-media h1{
    color: var(--White);
    font-weight: 600;
    font-size: 50px;
}
.social-media h2{
    color: var(--White);
    font-weight: 600;
    font-size: 50px;
}
.social-media span{
    color: var(--Yellow-500);
    font-weight: 600;
    font-size: 50px;
}
.social-media p{
    color: var(--White);
    font-weight: 400;
    font-size: 20px;
}
.multiple-accounts{
    background-color: var(--White);
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    gap: 20px;
}
.multiple-accounts h1{
    color: var(--Black);
    font-weight: 600;
    font-size: 35px;
    margin-left:45px;
}
.maintain-consistent{
background-color: var(--Yellow-500);
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
overflow: hidden;
gap: 30px;
}
.maintain-consistent h1{
    color: var(--Black);
    font-size: 35px;
    font-weight: 700;
    margin: 20px 0 0 40px;
}
.schedule{
    background-color: var(--Purple-100);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
   
}
.schedule h1{
    color: var(--Black);
    font-size: 30px;
    font-weight: 600;
    margin-left: 15px;
}
.schedule p{
    color: var(--Black);
    font-size: 23px;
    font-weight: 400;
    margin-left: 20px;
}
.schedule img{
width: 140%; 
margin-left: 190px;  
object-fit: cover;
}
.grow-followers{
    background-color: var(--Purple-500);
    display: flex;
    align-items: center;
 
}
.grow-followers h1{
    color: var(--White);
    font-size: 40px;
    font-weight: 600;
    margin-left: 10px;
}
.faster-audience{
background-color: var(--White);
display: flex;
align-items: center;
flex-direction: column;
gap: 10px;
}
.faster-audience h1{
    color: var(--Black);
    font-size: 40px;
}
.faster-audience p{
    color: var(--Black);
    font-size: 20px;
    font-weight: 500;
}
.create-post{
    background-color: var(--Yellow-100);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.create-post h1{
 color: var(--Black);
 font-size: 35px;
 font-weight: 600;
 margin-left: 50px;
}
.create-post span{
 color: var(--Purple-500);
 font-weight: 600;
 font-size: 35px;
}
.content{
    background-color: var(--Yellow-500);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    /* gap: 10px; */
}
.content img{
width: 65%;
}
.content h1{
    color: var(--Black);
    font-size: 30px;
  font-weight: 600;
  margin-left: 60px;
}
footer p{
    background-color: var(--White);
    display: flex;
    justify-content: center;
    align-items: center;
}
@media (max-width: 768px) {
    .bento-section {
        display: flex;
        flex-direction: column;
    }
    .schedule img{
        width: 50%; 
        margin-left: 0;  
        object-fit: cover;
        margin: 10px auto;
        }
        .content img{
            width: 30%;
            margin: 10px;
            }
            .schedule p{
                font-size: 30px;
                font-weight: 400;
                margin-left: 0px;
                margin: 15px;
            }
}