.bato-contactform {
    overflow: hidden;
}

.bato-contactform__inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.bato-contactform__content {
    max-width: 100%;
    grid-column: span 7;
}

.bato-contactform__form {
    width: 100%;
    grid-column: span 5;
}

.bato-contactform__info {
    width: 54rem;
    max-width: 80%;
}

.bato-contactform .breadcrumbs {
    padding-top: 1.6rem;
    margin-bottom: 17rem;
}

.bato-contactform__title {
    --fs: 8rem;
    --ls: 0.05;

    font-weight: 400;
    font-size: var(--fs);
    letter-spacing: calc(var(--fs) *var(--ls));
    line-height: calc(85/80);
    margin-bottom: 2rem;
}

.bato-contactform__title strong {
    font-weight: 700;
}

.bcf {
    /*width: 43dvw;*/

    width: calc( (100dvw - var(--wrapper)) / 2 + (var(--wrapper) / 12 * 5) );

    padding: 11rem 2rem 15rem;
    background: url(../img/bg.jpg) center top no-repeat;
    background-size: cover;
    position: relative;
}

.bcf__image {
    width: 31.5rem;
    max-width: 100%;
    position: absolute;
    top: calc(54 / 719 * 100%);
    right: 100%;
    z-index: -1;
}

.bcf__note {
    font-size: 1.2rem;
    text-align: right;
    line-height: calc(16/12);
    color: var(--color-gray-middle);
    margin-bottom: 0.5rem;
}

.bcf__message {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-light);
    text-align: center;
    position: absolute;
    inset: 0;
    z-index: 2;
    transition: 0.3s;
}

.bcf__message:not(.active) {
    opacity: 0;
    pointer-events: none;
}

.bcf__footer {
    padding-top: 0.8rem;
}

.bcf__submit {
    text-transform: uppercase;
}

.bcf__inner {
    width: 40rem;
    max-width: 100%;
    margin-inline: auto;
}

.bcf__fields {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.bcf__group {
    position: relative;
}

input.bcf__input,
textarea.bcf__input {
    padding: 2.4rem 2rem 0.8rem;
}

.bcf__input:hover,
.bcf__input:not(:placeholder-shown) {
    border-color: var(--color-black);
}

.bcf__input::placeholder {
    opacity: 0;
}

.bcf__label {
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--color-gray-middle);
    position: absolute;
    top: 1.6rem;
    left: 2rem;
    pointer-events: none;
    transition: 0.3s;
}

.bcf__input:focus ~ .bcf__label,
.bcf__input:not(:placeholder-shown) ~ .bcf__label {
    font-size: 1.2rem;
    top: 0.8rem;
}

@media screen and (max-width: 1024.9px) {
    .bato-contactform__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }

    .bato-contactform .breadcrumbs {
        margin-bottom: 2.5rem;
    }

    .bato-contactform__info {
        max-width: 100%;
    }

    .bcf {
        width: 50rem;
        margin-inline: auto;
    }

    .bcf__submit {
        width: 100%;
    }
}

@media screen and (max-width: 767.9px) {
    .bato-contactform__form {
        width: auto;
        margin-inline: -2rem;
    }

    .bcf {
        width: 100dvw;
    }

    .bato-contactform__title {
        font-size: 4rem;
        line-height: 1.1;
        letter-spacing: 0.1rem;
    }
}