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

body{
    font-family: "DM Sans", sans-serif;
    display: grid;
    place-content: center;
}

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


.bento-container {
    margin: 1rem;
    display: grid;
    max-width: 1000px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 55px;
    gap: 1rem;
    grid-template-areas:
        "item1 item2 item2 item3"
        "item1 item2 item2 item3"
        "item1 item2 item2 item3"
        "item1 item2 item2 item3"
        "item1 item4 item5 item3"
        "item6 item4 item5 item3"
        "item6 item4 item5 item3"
        "item6 item7 item8 item8"
        "item6 item7 item8 item8"
        "item6 item7 item8 item8";
}

.bento-item {
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
}


.item1 {
    grid-area: item1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem 0 2.5rem;
    background-color: hsl(31, 66%, 93%);
}

.item1 img{
    margin-top: 1rem;
    width: 200px;
}

.item1 p{
    color: hsl(256, 67%, 59%);
    letter-spacing: -1px;
    line-height: 1.1;
}

.item1 h2{
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item2 {
    grid-area: item2;
    padding: 2rem;
    text-align: center;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: hsl(256, 67%, 59%);
    gap: 0.5rem;

}

.item2 img{
    width: 150px;
    margin: 0;
}

.item2 h1{
    color: white;
    margin: 0;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item2 span{
    color:hsl(39, 100%, 71%);   
}

.item2 .cursive{
    font-style: italic;
}

.item2 p{
    color:white;
    margin: 0;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item3 {
    grid-area: item3;
    padding: 2rem;
    text-align: center;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: hsl(254, 88%, 90%);
    gap: 0.5rem;
}

.item3 h2{
    font-weight: 500;
    font-size: 28px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item3 img{
    margin-left: 150px;
    width: 300px;
}

.item3 p{
    font-size: 14px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item4 {
    grid-area: item4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem 0 2.5rem;
    background-color: hsl(0, 0%, 100%);
}

.item4 h2{
    font-weight: 500;
    font-size: 25px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item4 img{
    width: 300px;
    margin-bottom: 10px;
}

.item5 {
    grid-area: item5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem 1rem 0 2.5rem;
    background-color: hsl(39, 100%, 71%);
}

.item5 h2{
    width: 100px;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item5 img{
    margin-top: 10px;
    width: 100%;
    height: auto;
}

.item6 {
    grid-area: item6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: hsl(39, 100%, 71%);
}

.item6 h2{
    font-weight: 500;
    font-size: 30px;
    margin: 10px 10px 0 10px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.item6 img{
    width: 350px;
    margin-top: 10px;
}

.item7 {
    grid-area: item7;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 2rem 0 2.5rem;
    background-color: hsl(0, 0%, 100%);
}

.item7 h2{
    font-size: 50px;
    font-weight: 500;
}

.item7 p{
    font-size: 14px;
}

.item8 {
    grid-area: item8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 2rem 1 2.5rem;
    background-color: hsl(256, 67%, 59%);
}

.item8 img{
    margin-bottom: 5px;
}

.item8 h2{
    color: hsl(0, 0%, 100%);
    font-weight: 500;
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.1;
}




.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}