.module .container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    gap: 60px;
}

.module .container .listing .article {
    max-width: 640px;
    width: 100%;
}

.module .container .listing-search {
  width: 100%;
  max-width: 303px;
  min-width: 303px;
  margin: 0 auto;
}

.module .container .listing-search .row {
    display: flex;
    flex-direction: column;
    --gap-v: 15px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    height: 100%;
    width: 100%;
    border: none;
    background: transparent;
    background-color: white;
    max-width: 30px;
    max-height: 30px;
    z-index: 1;
    margin: auto;
}

.input-wrapper button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background: var(--secondary);
    mask-image: url(/assets/img/lupe.svg);
    mask-repeat: no-repeat;
    mask-position: center center;
    -webkit-mask-image: url(/assets/img/lupe.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
}

.module > picture {
    position: absolute;
    right: 0;
    transform: translateX(50%);
    max-height: 651px;
    max-width: 634px;
    height: 100%;
    width: 100%;
    top: calc(23% + 50vw);
    z-index: -1;
}

.module picture > img {
    object-fit: fill;
}

@media(min-width: 768px) {

    .module {
        padding-bottom: 50px;
    }

    .module .container .listing .row {
        --gap-v: 80px;
    }
        
    .module .container .listing-search .row {
        --gap-v: 20px;
    }
        
}

@media(min-width: 992px) {
    .module .container {
        flex-direction: row;
        gap: 0;
    }

    .module .container .listing-search {
        margin: 0 0 0 20px;
      }
}