.main-content {
    width: 1080px;  
    padding-top: 110px;
    padding-bottom: 110px;
    margin: auto;
}
.main-content .main-flex-container {
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.main-content .content-area {
    width: 100%;
}
main h1 {
    margin: 0;
    padding-bottom: 10px;
}
main ol,
main ul {
    padding: 0 0 0 50px;
}
main  ul {
    list-style: initial; 
}
.main-content .flex-column-first  {
    order: 2;  
    flex: 1;
  }
.main-content .flex-column-second {
    width: 230px; 
    order: 1;   
}

@media only screen and (max-width:1080px) {
    .main-content {
        width: 980px
    }
}

@media only screen and (max-width:980px) {
    .main-content {
        width: 920px
    }
}

@media only screen and (max-width:920px) {
    .main-content {
        width: 740px
    }
    .main-content .main-flex-container { 
        flex-direction: column; 
        padding-top: 30px;
    }
    .main-content .flex-column-second {
        position: fixed;
        order: 1;
        width: 100%;
        left: 0; 
        top: 61px; 
        box-shadow: 0 2px 8px 0 rgba(0,0,0,.1), 0 0 60px 0 rgb(39 102 149/8%);
    } 
     
}

@media only screen and (max-width:740px) {
    .main-content {
        width: 650px
    }
    .main-content .main-flex-container { 
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media only screen and (max-width:650px) {
    .main-content {
        width: 580px
    }
}

@media only screen and (max-width:580px) {
    .main-content {
        width: 520px
    }
}

@media only screen and (max-width:520px) {
    .main-content {
        width: 480px
    }
}

@media only screen and (max-width:480px) {
    .main-content {
        width: 420px
    }
}

@media only screen and (max-width:420px) {
    .main-content {
        width: 380px
    }
}

@media only screen and (max-width:380px) {
    .main-content {
        width: 320px
    }
}

.mySearchResult {
    height: 100vh;
}