@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvUDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKd3vUDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKebukDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v22/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsukDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlvAw.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmYUtvAw.ttf) format('truetype');
}

* {-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
html, body {position: relative; font-size: 10px; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; line-height: 1.4; color: #303538;}

body {background-image: linear-gradient(
        -180deg
        , white 60%, #fbfbfb 65%, #f6f6f6 100%);}

h1, h2, h3, h4, h5, h6, p {margin: 0 0 15px; padding: 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'Playfair Display', serif;}
ol, ul {margin: 0 0 15px 20px; padding: 0;}

img {max-width: 100%; height: auto;}

.mb_15 {margin-bottom: 15px;}

.fs_12 {font-size: 1.2rem;}

.b-sh {box-shadow: 0 8px 8px 0 rgb(0 0 0 / 4%), 0px -2px 8px 0px rgb(0 0 0 / 4%); -webkit-transition: box-shadow 0.25s ease; -moz-transition: box-shadow 0.25s ease; -ms-transition: box-shadow 0.25s ease;-o-transition: box-shadow 0.25s ease;transition: box-shadow 0.25s ease;}
.b-sh:hover {box-shadow: 0 4px 8px 0 rgb(0 0 0 / 8%); box-shadow: 0px 7px 19px -1px rgb(172 172 179 / 30%);}

.main {display: flex; flex-direction: column; min-height: 100vh; font-size: 1.7rem;}
.container {max-width: 1200px; margin: 0 auto; position: relative; padding-left: 10px; padding-right: 10px;}
.section {margin-bottom: 35px;}
.sectionRow {padding: 45px 0;}

header {padding: 15px 0; border-bottom: 1px solid #e2e9ee;}
.header {display: flex; justify-content: center; padding: 0;}
.logo img {display: block;}



/* Вывод изображений блюда */
.pageGallery {display: grid; grid-gap: 10px;}
.gl_2 {grid-template-columns: repeat(2, 1fr)}
.gl_3 {grid-template-columns: repeat(3, 1fr)}
.pageGalleryItem a, .pageGalleryItem img {display: block;}
.pageGalleryItem img {width: 100%; height: auto;}


/* Рецепты */
.posts {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px;}
a.postItemLink {background: #ffffff; display: block; color: inherit; text-decoration: none; overflow: hidden; border-radius: 16px;transform: translateY(0px);transition: transform 0.25s ease;}
a.postItemLink:hover {transform: translateY(-8px);}
.postItemImage img {display: block; width: 100%; height: auto;}
.postItemName {font-size: 1.9rem; margin: 0;}
.postItemInfo {padding: 16px; display: grid; grid-gap: 12px;}
.postItemTags {font-size: 1.1rem; display: flex; gap: 10px;}
.postItemTags span {height: 25px; padding: 0 15px; border-radius: 25px; background: #f6f6f6; display: flex; align-items: center;}


/* Страница с рецептом */
.containerTwoCol {display: grid; grid-template-columns: 1fr 400px; grid-gap: 40px;}
.sidebar {}
.sidebarIn {padding: 20px; border: 1px solid #dddddd;}





footer {margin-top: auto; padding: 15px 0; box-shadow: 0 -1px 0 0 #e3e4e6; color: #919399; font-size: 14px; background: #ffffff;}
@media (max-width: 1228px) {
    html, body {font-size: 9px;}
    .container {max-width: 768px;}
    .containerTwoCol {grid-template-columns: 1fr 280px; grid-gap: 20px;}
    .posts {grid-template-columns: repeat(2, 1fr)}
}

@media (max-width: 791px) {
    .container {max-width: 600px;}
    .containerTwoCol {grid-template-columns: 100%;}
}

@media (max-width: 634px) {
    .container {max-width: 425px;}
    .posts {grid-template-columns: 100%;}
}