:root {
    --header-height: 72px;
}

.main {
    min-height: 100svh;
    min-height: 100dvh;
    height: auto;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: var(--header-height);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
    box-sizing: border-box;
}

.main > .container {
    width: 100%;
    position: relative;
    z-index: 1;
}

.main .row {
    align-items: center;
}

.main .main-item h2,
.main .main-item h2.dev-title {
    white-space: nowrap;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.1;
    max-width: 100%;
}

.main .col-md-4 .img {
    opacity: 1;
}

@media (max-width: 991px) {
    :root {
        --header-height: 64px;
    }

    .main {
        min-height: 100svh;
        min-height: 100dvh;
        padding-top: calc(var(--header-height) + 1rem);
        padding-bottom: 3rem;
    }

    .main .row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .main .col-md-8,
    .main .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .main .main-item {
        position: relative;
        z-index: 2;
    }

    .main .btn-wrap {
        margin-top: 32px;
        margin-bottom: 32px;
        position: relative;
        z-index: 6;
    }

    .main .col-md-4 {
        position: relative;
        z-index: 1;
        margin-top: 0;
    }

    .main .img {
        margin-top: 0 !important;
        margin-left: auto;
        margin-right: auto;
        width: min(100%, 320px);
        max-width: 100%;
        height: clamp(220px, 62vw, 280px);
        z-index: 1;
    }

    .main .main-item h2,
    .main .main-item h2.dev-title {
        white-space: normal;
        font-size: clamp(26px, 7vw, 34px);
    }
}