// БЭМ блок: Меню навигации
.menu
    border-top double thick silver
    border-bottom double thick silver
    font-size 0
    display grid
    grid-template-columns repeat(7, min-content)
    grid-template-rows 1fr
    justify-items start
    
    &__link
        color black
        text-decoration none
        
    &__item
        display inline-block
        width max-content
        height 3em
        line-height 3em
        text-align center
        vertical-align middle
        padding 0 10px
        margin 0 10px
        overflow hidden
        text-overflow ellipsis
        font-size medium
        
        &_selected
            color green
            font-weight bold
            border-left double thin silver
            border-right double thin silver

// БЭМ блок: Hero изображения
.hero-images
    display flex
    flex-direction row
    width 90%
    margin auto
    
    &__item
        margin auto
        width 100%
        border thin solid black
        
        &:nth-child(2n+1)
            margin-top 10px

// БЭМ блок: Основной контейнер
.main
    display grid
    grid-template-columns 3fr 1fr
    grid-template-rows 1fr
    
    &__content
        // Стили для основного контента

// БЭМ блок: Информационный блок
.info-block
    border solid thin black
    padding 2vw
    margin 1vw 0
    
    &__header
        display block
        font-weight bold
        text-align center
        
    &__container
        &_layout_a
            display grid
            grid-template-columns 3fr 3fr 2fr
            grid-template-rows 1fr
            
        &_layout_b
            display grid
            grid-template-columns 4fr 7fr 4fr
            grid-template-rows 1fr
            
        & > *
            margin 2vw
            
    &__text, &__description
        text-align justify
        
    &__image
        margin auto
        width 100%
        
    &__link
        // Стили для ссылок
        color inherit
        
    &__details
        // Стили для деталей

// БЭМ блок: Боковая панель
.sidebar
    border-left thin solid black
    margin 30px 0 0 50px

// БЭМ блок: Маленькая карточка
.small-card
    margin 20px 10px 0
    display grid
    grid-template-columns 1fr 1fr
    grid-template-rows auto
    
    &__content
        text-align justify
        
    &__header
        display block
        font-weight bold
        text-align right
        
    &__text
        // Базовые стили для текста
        
    &__link
        display block
        text-align right
        color inherit
        
    &__image
        & img
            width 100%
        margin-left:10px

// Медиа-запросы
@media screen and (max-width: 1000px)
    .small-card
        display flex
        flex-direction column

@media screen and (max-width: 800px)
    .menu
        grid-template-columns 1fr 1fr
        grid-template-rows 1fr 1fr 1fr
        justify-items center
        
        &__item
            &_selected
                border-bottom double thick silver
                border-left none
                border-right none
    
    .hero-images
        display inline-flex
        flex-direction column
        width 100%
        
        &__item
            width 100%
            height 100%
            
            &:nth-child(2n+1)
                margin-top 0px
    
    .main
        display flex
        flex-direction column
        
    .info-block
        &__container
            &_layout_a, &_layout_b
                display flex
                flex-direction column