onlineordering-style.css

.ordering-system-container {
    padding: 22px;
    margin: 80px auto 0 auto;
    min-height: 100px;
    width: 90%;
    /* background-color: aquamarine; */
    display: block;
}

.form-area-wrapper {
    /* padding: 22px; */
    margin: 0 auto;
    min-height: 100px;
    /* background-color: yellow; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    column-gap: 0px;
}

.left-side {
    padding: 52px 52px 64px 52px;
    margin: 0 0px 0 auto;
    min-height: 400px;
    width: 80%;
    background-color: rgb(254, 254, 253);
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 41.67%, #FFFFFF 71.35%, #F5F5F5 93.75%, #EAEAEA 100%);
    /* background:radial-gradient(96.34% 239.96% at 100% 50.34%, #F8F8F8 0%, #FFFFFF 100%); */
    border-radius: 0 18px 18px 0;
    box-shadow: -8px 0px 12px rgba(0, 0, 0, 0.1);
    grid-column: 1 / span 1;
    grid-row: 1/span 1;
    z-index: 0;
    transform-origin: right center;
    transform: perspective(52cm) rotateX(8deg) rotateY(8deg);
}

.right-side {
    padding: 52px 52px 64px 52px;
    margin: 0 auto 0 0px;
    min-height: 400px;
    width: 80%;
    background-color: rgb(254, 254, 253);
    background: linear-gradient(90deg, #DCDCDC 0%, #F5F5F5 4.64%, #FFFFFF 12.27%, #FFFFFF 29.13%, #FFFFFF 100%);
    /* background:radial-gradient(100% 249.08% at 0% 59.18%, #F8F8F8 0%, #FFFFFF 100%); */
    border-radius: 18px 0 0 18px;
    box-shadow: 8px 0px 12px  rgba(0, 0, 0, 0.1);
    grid-column: 2 / span 1;
    grid-row: 1/span 1;
    z-index: 0;
    transform-origin: left center;
    transform: perspective(52cm) rotateX(8deg) rotateY(-8deg);
}

img {
    display: block;
}

.option-selection-wrapper{
    display: grid;
    margin: 30px 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 8px;
    column-gap: 8px;
    mix-blend-mode: multiply;
}

.option-container{
    display: block;
    padding: 12px 12px 6px 12px;
    /* margin: auto; */
    /* width: auto; */
    /* height: auto; */
    background:white;
    /* background: #b2fefa; fallback for old browsers */
    /* background: -webkit-linear-gradient(to bottom, #b2fefa, #0ed2f7); Chrome 10-25, Safari 5.1-6 */
    /* background: linear-gradient(to bottom,#0ed2f734, #b2fefa34); */
    border-radius: 6px;
    /* transition: 3s ease-in-out; */
}

.option-container:hover{
    background: -webkit-linear-gradient(to bottom, #b2fefa, #0ed2f7) !important;
    background: linear-gradient(to bottom,#0ed2f734, #b2fefa34);;
}
.option-image{
    margin: auto;
    border-radius: 6px;
    width: 120px;
    height: 120px;
    object-fit: cover;
}

.option-label{
    text-align: center;
    margin-top: 6px;
}

.option-arrow{
    margin:12px auto 0 auto;
}

.selected-option-description-container{
    margin: auto;
    width: 100%;
    display: grid;
    grid-column: 1/span 4;
    grid-row: 2/span 1;
    grid-template-columns: 0.6fr 1fr;
}

.option-example-image{
    border-radius: 6px;
    margin: auto;
    width: 100%;
    /* height: 120%; */
    grid-column: 1/span 2;
    grid-row: 2/span 1;
}

.option-description{
    margin: 0 auto;
    grid-column: 3/span 2;
    grid-row: 2/span 1;
}

.option-description h3{
    margin-bottom: 6px;
}

.form-input-wrapper{
    margin: 30px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 36px;
    column-gap: 36px;
}

.form-field-container input{
    border-radius: 6px;
    padding: 4px;
    margin-top: 8px;
    width: 80%;
    height: 36px;
    font-size: 15px;
    font-weight: 300;
    box-shadow: inset 1px 2px 4px #00000050;
    border: #00000070;
}