@mixin flex-column {
    display: flex;
    flex-direction: column;    
    justify-content: space-between;
    align-items: left;
}

@mixin flex-column-no {
    display: flex;
    flex-direction: column;    
    justify-content: flex-start;
    align-items: left;
}

@mixin flex-row {
    display: flex;
    flex-direction: row;    
    justify-content: space-between;
    align-items: center;
}

@mixin flex-row-hug {
    display: flex;
    flex-direction: row;    
    justify-content: start;
    align-items: center;
}

@mixin flex-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

@mixin respond-phone {
    @media (max-width: 780px) { @content }
}

.logo {
    height: 24px;
    width: 24px;

}

.header {
    @include flex-row;
    padding: $px-24 0;
    width: 100vw;
    // background-color: $color-background;
    // background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.footer {
    margin: 0 auto;
    padding: $px-48 $px-24;
}

.nav {
    @include flex-row;
    gap: $px-4;
}

.section {
    @include flex-column;
    margin: 0 auto;
    padding: 0px;
    gap: $px-14;
    width: 712px;

    @include respond-phone {
        width: 100%;
        padding: $px-24;
    }

}

.post-section {
    @include flex-column;
    margin: 0 auto;
    padding: 0px;
    gap: $px-14;
    width: 712px;

    @include respond-phone {
        width: 100%;
        padding: $px-24;
    }
}

.contain-column {
    display: flex;
    flex-direction: column;    
    align-items: left;
    gap: $px-14;
}

.contain-row {
    display: flex;
    flex-direction: row;    
    align-items: center;
    gap: $px-8;

    /* 
    @include respond-phone {
        flex-direction: column; 
        align-items: start;
    }
    */
}

.contain-row-fill {
    display: flex;
    flex-direction: row;    
    align-items: center;
    justify-content: space-between;
    gap: $px-8;   

    @include respond-phone {
        flex-direction: column; 
        align-items: start;
    }
}

.contain-grid {
    @include flex-wrap;
    gap: $px-14;
    grid-gap: $px-14;
}

.box-tabs {
    @include flex-row;
    box-sizing: border-box;
    padding: $px-4 $px-8;
    gap: $px-4;
    border: 1px solid $color-gray-light;
    border-radius: $px-8;
    background: $color-background;
}

.box-editor {
    @include flex-column;
    gap: $px-20;
    width: 920px;
    padding: $px-20;

    @include respond-phone {
        width: 360px;
    }
}

.space-top {
    margin-top: $px-48;
}

.space-top-large {
    margin-top: $px-80;
}

.space-right {
    margin-right: $px-80;
}

.slika {
    width: 100%;
    height: 240px;
}