пропал блок с фотография ми на сайте

Всем привет! Пропал блок с фотографиями при адаптации сайта. До адаптации загрузил сайт на GIT HUB, всё работет исправно. Вот ссылка на репозиторий: https://github.com/AlexeyGustav/Balloons-desktop-version . Адаптирую от компьютера к мобилке пока на разрешении 600px всё исправно блок виден, но на разрешениях 900px и 1240px он исчез, причём если убираю в инспекторе галочку с display: flex; блок появляется и элементы растягиваются на 100%

Ещё задал это свойство,может оно так повлияло:(но убирая это свойство ничего не меняется)

@include respond(tab-port)
    [class^="col-"]
        width: 100%

Миксин адаптации

@mixin phone
    @media (max-width: 600px)
        @content

@mixin respond($breakpoint)
    @if $breakpoint == phone
        @media (max-width: 600px)
            @content

@if $breakpoint == tab-port
    @media (max-width: 900px)
        @content

@if $breakpoint == tab-land
    @media (max-width: 1240px)
        @content

@if $breakpoint == big-screen
    @media (min-width: 1800px)
        @content

КОД HTML

 <section class="section-tour">
            <div class="text-align-center margin-bottom-80px">
                <h2 class="title-secondary">наиболее популярные туры</h2>
            </div>
            <div class="row">
                <div class="col-1-of-3">
                    <div class="card-tour">
                        <div class="card-tour__side card-tour__side_front">
                            <div class="card-tour__img card-tour__img_1 margin-bottom-80px">            
                                <img src="./img/Photo-card-1.jpg" alt="Толпа людей">
                            </div>
                            <h4 class="card-tour__title">
                                <span class="card-tour__span card-tour__span_1">групповые</span>
                                <br>
                                <span class="card-tour__span card-tour__span_2">туры</span>
                            </h4>
                            <div class="card-tour__dscr">
                                <ul>
                                    <li><u>Группы от 6 человек</u></li>
                                    <li><u>Продолжительность 2 часа</u></li>
                                    <li><u>В группе 1 гид</u></li>
                                    <li><u>Дальность полета 6км</u></li>
                                    <li><u>Бесплатные сувениры</u></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-tour__side card-tour__side_back">
                            <div class="card-tour__backSide-box">
                                <p class="card-tour__text card-tour__text_1">полная стоимость:</p>
                                <p class="card-tour__text card-tour__text_2">28.000₽</p>
                                <a href="#" class="card-tour__btn btn_animated">забронировать</a>
                            </div>
                        </div>
                        
                    </div>
                </div>
                <div class="col-1-of-3">
                    <div class="card-tour">
                        <div class="card-tour__side card-tour__side_front">
                            <div class="card-tour__img card-tour__img_2 margin-bottom-80px">
                                <img src="./img/Photo-card-2.jpg" alt="Вид на шары">
                            </div>
                            <h4 class="card-tour__title">
                                <span class="card-tour__span card-tour__span_1">частные</span>
                                <br>
                                <span class="card-tour__span card-tour__span_2">туры</span>
                            </h4>
                            <div class="card-tour__dscr">
                                <ul>
                                    <li><u>Группы от 2 человека</u></li>
                                    <li><u>Продолжительность 1.5 часа</u></li>
                                    <li><u>В группе 1 гид</u></li>
                                    <li><u>Дальность полета 5км</u></li>
                                    <li><u>Бесплатный чай</u></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-tour__side card-tour__side_back">
                            <div class="card-tour__backSide-box">
                                <p class="card-tour__text card-tour__text_1">полная стоимость:</p>
                                <p class="card-tour__text card-tour__text_2">20.000₽</p>
                                <a href="#" class="card-tour__btn btn_animated">забронировать</a>
                            </div>
                        </div>
                        
                    </div>
                          
                </div>
                
                <div class="col-1-of-3">
                    <div class="card-tour">
                        <div class="card-tour__side card-tour__side_front">
                            <div class="card-tour__img card-tour__img_3 margin-bottom-80px">
                                <img src="./img/Photo-card.jpg" alt="Смотровая площадка">
                            </div>
                            <h4 class="card-tour__title">
                                <span class="card-tour__span card-tour__span_1">смотровые</span>
                                <br>
                                <span class="card-tour__span card tour__span_2">площадки</span>
                            </h4>
                            <div class="card-tour__dscr">
                                <ul>
                                    <li><u>Группы от 8 человек</u></li>
                                    <li><u>Продолжительность 2.5 часа</u></li>
                                    <li><u>В группе 1 гид</u></li>
                                    <li><u>Дальность полета 7км</u></li>
                                    <li><u>Бесплатный чай и сувениры</u></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-tour__side card-tour__side_back">
                            <div class="card-tour__backSide-box">
                                <p class="card-tour__text card-tour__text_1">полная стоимость:</p>
                                <p class="card-tour__text card-tour__text_2">30.000₽</p>
                                <a href="#" class="card-tour__btn btn_animated">забронировать</a>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div> 
            <div class="text-align-center text-align-center__pading">
                <a href="#" class="btn btn_animated">наш каталог</a>
            </div>
        </section>

Тут всё нормально.

КОД из SASS

.card-tour  
    height: 50rem
    perspective: 150rem
    -moz-perspective: 150rem
    position: relative
    @include respond(tab-port)
        height: 55rem
  
&__side
    box-shadow: $box-shadow
    height: 50rem
    transition: .8s all ease-out
    position: absolute
    top: 0
    left: 0
    width: 100%
    backface-visibility: hidden
    border-radius: .5rem
    overflow: hidden
    @include respond(tab-land)
        height: 55rem
    @include respond(tab-port)
        width: 63%
        height: 55rem
        left: 10rem

    &_front
        
    &_back
        background: green
        transform: rotateY(180deg)
        background: linear-gradient(90deg, $color-brown, $color-light)
         
&:hover &__side
    transform:  rotateY(-180deg)
&:hover &__side_back
    transform: rotateY(0deg)

&__img
    
    height: 21rem
    object-fit: cover
    background-blend-mode: hard-light
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 89%)
    &_1
        background-image: url(./img/Photo-card-1.jpg) 
    &_2
        background-image: url(./img/Photo-card-2.jpg) 
    &_3
        background-image: url(./img/Photo-card.jpg) 
    @include respond(tab-land)
        height: 28rem
    @include respond(tab-port)
        height: 31rem

&__title
    font-weight: 300
    font-size: 2.8rem
    text-transform: uppercase
    text-align: right
    letter-spacing: .2rem
    position: absolute
    top: 18rem
    right: 0
    @include respond(tab-land)
        top: 24rem
        
    @include respond(tab-port)
        top: 25rem
        font-size: 3.3rem
    
&__span
    color: $color-white
    background: linear-gradient(90deg, $color-brown, $color-light)
    
    padding: 1rem 2rem .3rem 2rem
    &_1
    &_2
        position: absolute
        top: 3.4rem
        right: 0
        padding-bottom: 1rem
&__dscr 
    @include respond(tab-port)
        margin-top: 100rem
    ul
        list-style: none
        margin: 0 auto
    
        li
            font-weight: 500
            letter-spacing: .3rem
            line-height: 1.5rem
            font-size: $font-size-paragraph
            color: $color-gray
            text-align: center
                @include respond(tab-port)
                    font-size: 2rem
            
            
            &:not(:last-child)   
                margin-bottom: 2rem
                @include respond(tab-land)
                    margin-bottom: 1.7rem
                @include respond(tab-port)
                    margin-top: 2rem
                    margin-bottom: 2rem
&__backSide-box
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
&__text
    margin-bottom: 8rem
    letter-spacing: .2rem
    text-transform: uppercase
    text-align: center
    color: $color-white 
    &_1
        font-size: $font-size-paragraph
        width: 90%
        font-weight: 300
    &_2
        font-size: 6rem
        font-weight: 500
&__btn
    &:link, &:visited
    @include style-link($color-gray)
    padding: 2rem 3rem 0rem 3rem
    background-color: $color-white
    border-radius: 5rem
    transition: all .3s
    
    font-size: 2rem

    &:hover
        transform: translateY(-4px)
        box-shadow: $box-shadow
        &::after
            opacity: 0
            transform: scaleX(1.5) scaleY(1.7)
    &:active
        transform: translateY(-2px)
        box-shadow: $box-shadow
    &::after
        content: ""
        background: $color-white
        width: 100%
        height: 100%
        border-radius: 5rem
        display: inline-block
        
        top: 0
        left: 0
        z-index: -1
        transition: all .4s

        
    &_animated
        animation: BtnToUp .5s ease-out .7s
        animation-fill-mode: backwards

.text-align-center__pading
    padding-bottom: 4rem

КОД сетки SASS

.row
display: flex
flex-direction: row
max-width: $grid-width
margin: 0 auto
&:not(:last-child)
    margin-bottom: $margin-vertical-big

.col-1-of-3
    width: calc((100% - 2 * #{$gutter-horizontal}) / 3)
    margin: 0 auto
    @include respond(tab-port)
        margin-bottom: 2rem

Ответы (0 шт):