Контент имеет некоторую позицию в медиа-запросе

Question

У меня есть карты, на которых, если пользователь наводит курсор, он поворачивается на 180De и показывает кнопку цены и бронирования, но на мобильных устройствах я хочу добавить цену и кнопку под картой, но цена и кнопка имеют некоторую позицию в медиазапросе, но без медиа запрос работает отлично, я получаю результат, который я хочу.

Вот как это выглядит с медиа Query

Так что это родительский Элемент, который находится в правильном месте

Но здесь

Вот в чем проблема, если позиция относительно, то почему она выше своего родительского элемента.

Работает совершенно без медиазапросов. Поскольку код слишком длинный, я не могу вставить все это здесь, потому что я разделил все это на разные файлы. Поэтому, пожалуйста, скажите мне, если вам нужен какой-либо код.

EDIT

@include respond(tabs-portrait) {
        height: auto;                 // This is for .card
        background-color: $color-white;    // This is for .card
        border-radius: 3px;               // This is for .card

        &__side {
           border-radius: 3px;
           position: relative;
           height: auto;
           box-shadow: none;

            &--back {
                height: auto;
                transform: rotateY(0deg);

            }
        }


        &__side--back {
            clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
        }


  &__back-content {
            width: 90%;
            position: relative;
            padding: 20rem 0 10rem 0;
            height: 1rem;

        }
    }