item_h=3em;

double-border()
    border-top double thick silver
    border-bottom double thick silver

flex-center()
    display flex
    align-items center
    justify-content center

text-center-bold()
    text-align center
    font-weight bold
    display block

grid-responsive(columns)
    display grid
    grid-template-columns columns
    grid-template-rows 1fr

.navbar
    double-border()
    font-size 0
    grid-responsive(repeat(8, min-content))
    justify-items start
    
    &__link-wrapper
        color black
        text-decoration none
        
    &__item
        display inline-block
        width max-content
        height item_h
        line-height item_h
        text-align center
        vertical-align middle
        padding 0 10px
        margin @padding
        overflow hidden
        text-overflow ellipsis
        font-size medium
        
        &_selected
            color green
            font-weight bold
            border-left double thin silver
            border-right double thin silver

.gallery
    display flex
    flex-direction row
    width 90%
    margin auto
    
    &__image
        margin auto
        width 100%
        border thin solid black
        
        &:nth-child(2n+1)
            margin-top 10px

.main-container
    grid-responsive(3fr 1fr)
    

.info-block
    border solid thin black
    padding 2vw
    margin 1vw 0
    
    &__header
        text-center-bold()
        
    &__container
        &_layout-a
            grid-responsive(3fr 3fr 2fr)
            
        &_layout-b
            grid-responsive(4fr 7fr 4fr)
            
        & > *
            margin 2vw
            
    &__text, &__description
        text-align justify
        
    &__image
        margin auto
        width 100%
        
    &__link
        color inherit
        



.sidebar
    border-left thin solid black
    margin 30px 0 0 50px

.small-card
    margin 20px 10px 0
    grid-responsive(1fr 1fr)
    
    &__content
        text-align justify
        
    &__header
        text-center-bold()
        text-align right
        
    &__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
    .sidebar
        margin 0
        width:100%


@media screen and (max-width: 800px)
    .navbar
        grid-responsive(1fr 1fr)
        grid-template-rows 1fr 1fr 1fr
        justify-items center
        
        &__item
            &_selected
                border-bottom double thick silver
                border-left none
                border-right none
    
    .gallery
        display inline-flex
        flex-direction column
        width 100%
        
        &__image
            width 100%
            height 100%
            
            &:nth-child(2n+1)
                margin-top 0px
    
    .main-container
        display flex
        flex-direction column
        
    .info-block
        &__container
            &_layout-a, &_layout-b
                display flex
                flex-direction column