﻿/********************************************************************/
/*                      Общее                                     */
/********************************************************************/
body, html {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
body{
    overflow-x: hidden;
}
.content{
    max-width: 1200px;
    margin: 0px auto 0px auto;
}



/********************************************************************/
/*                      Верхнее меню                                */
/********************************************************************/
.pf-menu-top{
    margin: 0px auto 0px auto;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
}

.pf-menu-top-content{
    max-width: 1200px;
    margin: 0px auto 0px auto;
}

/********************************************************************/
/*                      Колонки                                     */
/********************************************************************/
/* Две колонки */
.pf-colums-2{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
}
/* Три колонки */
.pf-colums-3{
    display: grid;
    grid-template-columns: 33% 34% 33%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
}


/* Четыре колонки */
.pf-colums-4{
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
}



/********************************************************************/
/*                      Блоки                                       */
/********************************************************************/
.pf-block-1-4{
    display: grid;
    grid-template-columns: 40% 29% 29%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;

    grid-template-areas: 
    "main . ."
    "main . ."
}


.pf-block-4-1{
    display: grid;
    grid-template-columns: 29% 29% 40%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;

    grid-template-areas: 
    ". . main"
    ". . main"
}


.pf-block-1-2{
    display: grid;
    grid-template-columns: 40% 60%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;

    grid-template-areas: 
    "main . "
    "main . "
}


.pf-block-2-1{
    display: grid;
    grid-template-columns: 60% 40%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;

    grid-template-areas: 
    "main ."
    "main ."
}


.pf-block-1-1{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: 
    "one two"
}

