*{
    box-sizing: border-box;
}

img{
    width: 100%;
}

body{
    background: #ccda46;
    margin: 0;
}

.container{
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.top{
    height: 35%;
    width: 100%;
    margin-bottom: 200px;
    display: flex;

}

.top-item{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1{
    font-family: "aristelle-script", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 200px;
    color: coral;
    padding: 20px;
}


p{
    width: 200px;
    height: 150px;
    font-family: "jaf-domus-titling-web", sans-serif;
    font-weight: 500;
    font-style: medium;
}

.middle{
    width: 100%;
    height: auto;
    display: flex;
    gap: 550px;
    justify-content: center;
    align-items: center;
    padding-bottom: 50px;
}

.middle-item{
    background: #f1f9a6;
    border: coral solid 2px;
    flex-direction: row;
    border-radius: 15px;
    overflow: hidden;
}

.middle-item img{
    width: 200px;
    display: block;
}

.middle2{
    width: 83%;
    height: auto;
    display: flex;
    gap: 40px;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding-bottom: 50px;
    
}

.middle-item2{
    background: #f1f9a6;
    border: coral solid 2px;
    border-radius: 15px;
    overflow: hidden;
}

.middle-item2 img{
    width: 200px;
    display: block;
}

.middle3{
    width: 100%;
    height: auto;
    display: flex;
    gap: 45px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-bottom: 50px;
    
}

.middle-item3{
    background: #f1f9a6;
    border: coral solid 2px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;

}

.middle-item3 img{
    width: 200px;
    height: 180px;
    display: block;
}

.middle4{
    width: 100%;
    height: auto;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 300px;
    padding-bottom: 50px;
}

.middle-item4{
    background: #f1f9a6;
    border: coral solid 2px;
    border-radius: 15px;
    overflow: hidden;
}

.middle-item4 img{
    width: 200px;
    height: 180px;
    display: block;
}


.middle5{
    width: 83%;
    height: auto;
    display: flex;
    gap: 40px;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding-bottom: 50px;
}

.middle-item5{
    background: #f1f9a6;
    border: coral solid 2px;
    border-radius: 15px;
    overflow: hidden;
}

.middle-item5 img{
    width: 200px;
    height: 180px;
    display: block;
}


.middle6{
    width: 83%;
    height: auto;
    display: flex;
    gap: 200px;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    padding-bottom: 50px;
    
}

.middle-i6{
    background: #f1f9a6;
    border: coral solid 2px;
    width: 400px;
    height: 400px;
    border-radius: 15px;
    justify-content: center;
    overflow: hidden;
}

.middle-item6{
    background: #f1f9a6;
    border: coral solid 2px;
    border-radius: 15px;
    overflow: hidden;
}

.middle-item6 img{
    display: block;
}

.middle-item6 img{
    width: 200px;
    height: 180px;
    display: block;
}

.middle7{
    width: 100%;
    height: auto;
    display: flex;
    gap: 45px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding-bottom: 50px;
    
}

.middle-item7{
    background: #f1f9a6;
    border: coral solid 2px;
    border-radius: 15px;
    overflow: hidden;
}

.middle-item7 img{
    width: 200px;
    height: 180px;
    display: block;
}


.bottom{
    height: 30%;
    width: 100%;
    display: flex;
}