#main-content {
    margin: 10px 20px;

    .main-title {
        padding: 5px;
        text-align: center;
        /* background-color: #8f7089b5;
        box-shadow: 10px 5px 5px #aba1a9b5; */
        border: 1px solid grey;
        border-radius: 10px;
        margin: 20px 0;
        padding: 10px;
        box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
                    0 0 0 2px rgb(255, 255, 255),
                    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
    }

    .banner {
        margin: 20px 0;
        /* background: rgba(255, 255, 255, 0); */
        background-image: url(/img/image0.jpeg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        border-style: none;
        /* margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
        border-radius: 0px;
        width: 100%; */
        height: 700px;
        position: relative;
        display: flex;
        align-content: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        flex-direction: column;

        .description {
            text-align: left;
            margin-right: 10px;
            
            a {
                color: black;
                font-weight: 700;
            }
        }

        .title,
        .description {
            padding: 5px;
            background-color: #aba1a9ed;
            /* box-shadow: 10px 5px 5px #aba1a9b5; */
            border: 1px solid grey;
            border-radius: 10px;
            margin: 20px 20px;
            /* padding: 10px; */
            box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
                        0 0 0 2px rgb(255, 255, 255),
                        0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
    
        }
    }


    .background1 {
        background-color: #aba1a9ed;
    }
    .background2 {
        background-color:#1f78ee33;
    }
    
    .content:nth-child(2n+1) {
        background-color:#1f78ee33;
    }

    img {
        padding: 0 20px;
        max-width: 400px;
        border-radius: 20px;    
    }

    .video {
        text-align: center;
        padding: 20px;
        width: 420px;
        min-width: 420px;

        iframe {
            width: 100%;
        }
    }

    .content.list {
        max-width: 600px;
    }

    .list .description p {
        font: 20px;
        font-weight: 600;
        text-align: left;
        border-bottom: 1px solid grey;
    }

    .list {
        .wrap {
            font: 20px;
            font-weight: 600;
            text-align: left;
            border-bottom: 1px solid grey;

            div {
                width: 50%;
            }
        }
    }

    .title,
    .review-title {
        text-align: center;
    }

    .content-wrap {
        .content {
            border: 1px solid grey;
            border-radius: 10px;
            /* background-color: #fafaf9; */
            margin: 20px 0;
            padding: 10px;
            box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
                        0 0 0 2px rgb(255, 255, 255),
                        0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
        }

        .description {
            text-align: justify;

            p {
                font-size: large;
            }
        }
    }

    .wrap {
        display: flex;
        justify-content: center;
    }

    .content-review {

        .description {
            display: flex;            
            flex-wrap: wrap;
            align-content: space-between;
            align-items: flex-start;
        }

        .review {
            width: 30%;
            margin: 10px;
        
            .review-title {
                font-weight: 600;
            }

            .review-description {
                margin-top: 10px;
                font-style: italic;
            }

        }
    }
}

@media only screen and (max-width: 1024px) {
    #main-content {
        .wrap {
            align-items: center;
            flex-direction: column-reverse;
        }

        & .content-review {
            .review {
                width: 46%;
            }
        }
    }
}


@media only screen and (max-width: 640px) {
    #main-content {
        & .content-review {
            .review {
                width: 96%;
            }
        }

        .video {
            padding: 0;
            width: 100%;
            min-width: fit-content;
        }

        img {
            padding: 0;
            width: 100%;
        }
    }
}