.vue-main-banner__container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px 12px;
    box-sizing: border-box;
}

.vue-main-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1170px;
    border-radius: 8px;
    box-sizing: border-box;
}

.vue-main-banner a {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vue-main-banner img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
    border-radius: 8px;
}

.vue-main-banner__img-desktop {
    display: none;
}

.vue-main-banner__img-mobile {
    display: flex;
}

@media (min-width: 861px) and (max-width: 1230px){
    .vue-main-banner__container {
        margin: 40px 12px;
    }

    .vue-main-banner img {
        width: calc(100% - 24px);
    }
}

@media (min-width: 600px) {
    .vue-main-banner__img-mobile {
        display: none;
    }

    .vue-main-banner__img-desktop {
        display: flex;
    }
}

@media (min-width: 1231px) {
    .vue-main-banner img {
        width: 100%;
    }
}