@media screen and (max-width: 767px) {
    /*.burger-img,
    .coke-img {
        height: 300px;
    }*/
    .burger-img {
        display: none;
    }
    .coke-img {
        left: -70px;
    }
    .option {
        height: 220px;
        width: 120px
    }
    .main-title {
        font-size: 30pt;
    }
    .grid-header {
        overflow-x: hidden;
        grid-template-columns: 17.5% 65% 17.5%;
    }
    .sub-title {
        font-size: 20pt;
        width: auto;
        line-height: 25px;
    }
    .icon-scroll {
        z-index: 2;
    }
    .scroll-down-text {
        top: -170px;
        left: 46px;
        z-index: 2;
    }
    .option-container {
        grid-template-columns: 50% 50%;
    }
    .social-icons {
        text-align: center;
        position: relative;
        top: 0;
        right: 0;
        z-index: 4;
        display: none;
    }
    .mouse-img {
        z-index: 2;
        height: 175px
    }
    #option-text {
        font-size: 26pt;
        padding: 60px 10px;
    } 
    #main-section {
        display: block;
    }
    .next-img {
        height: 40px;
    }
    .next-btn {
        margin-top: 16px;
    }
    .next-btn-text {
        font-size: 18pt;
    }
    #main-footer {
        position: relative;
        width: 100vw;
        left: 0;
    }
    .inner-option-div {
        top: 50px;
        left: 40px;
        padding: 0;
    }
    .btn-cancel {
        display: none;
    }
    .column-1 {
        background-color: #F7F7F7;
        padding-bottom: 100px;
        overflow-x: hidden;
    }
    .column-2 {
        position: fixed;
        bottom: 0;
        width: 100vw;
        height: 100px;
        background-color: #FFF;
        z-index: 100;
        margin-top: 140px;
    }
    .skip-section-btn {
        height: 100px;
        width: 100px;
        right: 0;
    }
    .skip-section {
        position: relative;
        top: 25%;
    }
    .tick-img {
        top: 40px;
        left: 1px;
        height: 68px;
        position: relative;
    }
    .drink-header {
        margin: 0 60px;
        font-size: 12pt;
    }
    .underline {
        margin: 12px 60px 0 60px
    }
    .logo {
        padding: 36px 0;
    }
    .option-name {
        font-size: 10pt;
    }
    .title-div {
        width: 80%;
    }
    .social-icons-mobile {
        display: inline;
        position: relative;
        top: 10px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .burger-img,
    .coke-img {
        height: 400px;
    }
    .burger-img {
        top: 40px;
    }
    .option-container {
        grid-template-columns: 33% 33% 33%;
    }
    #main-section {
        grid-template-columns: 100%;
    }
    .main-title {
        font-size: 47pt
    }
    .next-img {
        height: 50px
    }
    .sub-title {
        width: auto;
    }
    .coke-img {
        right: 0px;
    }
    .grid-header {
        grid-template-columns: 22.5% 55% 22.5%;
    }
    .scroll-down-link {
        visibility: hidden;
    }
    .scroll-down-text {
        top: -190px;
        left: 56px;
    }
    #main-footer {
        width: 100vw;
        position: relative;
        bottom: 0; 
        margin-bottom: 10px;   
    }
    .column-1 {
        margin-bottom: 100px;
    }
    .column-2 {
        position: fixed;
        bottom: 0;
        width: 100vw;
        height: 100px;
        background-color: #FFF;
        z-index: 100;
        margin-top: 40px;
    }
    #option-text {
        font-size: 38pt; 
    }
    .skip-section-btn {
        height: 100px;
        width: 100px;
        right: 0;
    }
    .skip-section {
        position: relative;
        top: 25%;
    }
    .tick-img {
        top: -122px;
        left: 1px;
        height: 68px;
        position: relative;
    }
    .drink-header {
        margin: 0 60px
    }
    .underline {
        margin: 12px 60px 0 60px
    }
}

@media screen and (min-width: 1023px) and (max-width: 1439px) {
    .burger-img,
    .coke-img {
        height: 510px;
    }
    .burger-img {
        top:0;
    }
    .main-title {
        font-size: 48pt
    }
    .coke-img {
        right: 0px;
    }
    .option-container {
        grid-template-columns: 33% 33% 33%;
    }
    .option {
        display: inline-block;
    }
    #main-footer {
        position: relative;
    }
}