:root {
  --color-white: #FFFFFF;
  --color-gray: #CDCDCB;
  --color-gray-light: #F3F3F3;
  --color-black: #000000;
  --color-black: #020D1D;
  --color-dark: #343D4A;
  --color-grey-dark: #909293;
  --color-green: #496C05;
  --color-red: #FD0101;
  --color-red_new: #DB3E31;
  --color-violet: #551A8B;
  --color-green-light: #7A9D54;
  --color-green-light1: #B8CF9A;
  --color-green-light2: #7A9D54;
  --color-green1: #496C05;
  --color-green2: #334414;
  --color-green3: #557C55;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  min-width: 320px;
  height: 100%;
  font-family: "Roboto", sans-serif;
}

body {
  color: var(--color-black);
  background-color: var(--color-white);
}

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

.page-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.container-wide {
  max-width: 1440px;
  margin: 0 auto;
  background-color: yellowgreen;
}

.container-narrow {
  max-width: 1170px;
  margin: 0 auto;
}

main {
  padding: 5px;
  flex-grow: 1;
}

img {
  -o-object-fit: cover;
     object-fit: cover;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  padding: 0;
}

.menu {
  background-color: cornsilk;
}

.footer {
  margin-top: auto;
}

.header {
  font-size: 18px;
  line-height: 22px;
  font-weight: 700;
  width: 100%;
  display: flex;
  z-index: 10;
  background-color: var(--color-white);
}
.header__container {
  max-width: 1170px;
  margin: 0 auto;
}
.header__block {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__menu {
  height: 60px;
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.header__logo {
  width: 150px;
  height: 50px;
}

.header__btnnav {
  margin: 0 120px 0 auto;
}
.header__btnnav ul {
  list-style-type: none;
  display: flex;
  align-items: center;
}
.header__btnnav ul li {
  display: block;
  margin-right: 15px;
}
.header__btnnav ul li:last-child {
  margin-right: 0;
}
.header__btnnav ul li a {
  display: flex;
  padding: 8px 20px;
  background-color: var(--color-gray-light);
  border-radius: 8px;
  color: var(--color-green);
  text-decoration: none;
  outline: none;
}
.header__btnnav ul li a:hover {
  background-color: var(--color-green-light);
  color: var(--color-white);
}

.header__nav {
  margin: 0 120px 0 auto;
}
.header__nav ul {
  list-style-type: none;
  display: flex;
  text-transform: uppercase;
  align-items: center;
}
.header__nav ul li {
  display: block;
  margin-right: 10px;
}
.header__nav ul li:last-child {
  margin-right: 0;
}
.header__nav ul li a {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  padding: 8px 20px;
  font-size: 16px;
  color: var(--color-black);
  text-decoration: none;
  outline: none;
}
.header__nav ul li a:hover {
  text-decoration: none;
  color: var(--color-green);
}

.header__right {
  max-width: 172px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__login {
  color: var(--color-green);
  display: none;
}
.header__login::before {
  transition: all 0.4s;
  transform: scale(0);
}
.header__login:hover {
  text-decoration: none;
  color: var(--color-black);
}
.header__login:hover::before {
  transform: scale(1);
}

.header__btn {
  display: flex;
  padding: 8px 12px;
  background-color: var(--color-green);
  border-radius: 8px;
  color: var(--color-white);
  margin-left: 20px;
  margin-right: 35px;
}
.header__btn:hover {
  background-color: var(--color-gray-light1);
  color: var(--color-green);
}

.header__burg {
  padding: 8px 30px;
  margin-left: 10px;
  margin-right: 55px;
}
.header__burg:hover {
  size-adjust: 110%;
  transition: 0.5s;
  transform: scale(1.2);
  transform: rotate(90deg);
}

.header__img {
  display: inline;
  display: none;
}

/******************************** Planshet 1160px******************************/
@media (max-width: 1160px) {
  .header__btnnav {
    margin: 0 45px 0 auto;
  }
  .header__nav {
    margin: 0 45px 0 auto;
  }
}
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .header__block {
    width: 788px;
    height: 140px;
    flex-direction: column;
    justify-content: center;
  }
  .header__logo {
    width: 70px;
    margin: 30px 0px 20px 0px;
  }
  .header__btnnav {
    margin: 0 40px 0 auto;
  }
  .header__nav {
    margin: 0 15px 0 auto;
  }
  .header__nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  .header__nav ul li a {
    padding: 5px 10px;
  }
  .header__login {
    display: none;
  }
  .hide {
    display: none;
  }
}
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .header__logo {
    margin: 50px 0px 10px 0px;
  }
}
.banner {
  position: relative;
  height: 50vh;
  background-image: url(/storage/images/коллаж.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 10px;
  font-family: "Roboto", sans-serif;
  font-size: 30px;
  font-weight: bold;
}
.banner__block {
  position: absolute;
  top: 56%;
  left: 2%;
}
.banner__title {
  text-transform: uppercase;
  text-shadow: 1px 1px var(--color-white);
}
.banner__text {
  font-size: 2.2vh;
  text-shadow: 1px 1px var(--color-white);
}
.banner__photosource {
  font-size: 15px;
  color: var(--color-gray);
  padding-left: 5px;
}

/******************************** Planshet 1160px******************************/
@media (max-width: 1160px) {
  .banner__banner {
    height: 50vh;
  }
}
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .banner__text {
   
  }
}
.maindata {
  padding: 30px 0 30px 0;
}
.maindata__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
}
.maindata__blocks {
  position: relative;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.maindata__block {
  width: 100%;
  min-height: 120px;
}
.maindata__selblocks {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.maindata__selblock {
  width: 180px;
  height: 30px;
}
.maindata__label {
  font-size: 15px;
}
.maindata__list {
  font-size: 15px;
  width: 160px;
  height: 30px;
  padding: 2px 0 0 0;
  border: 1px solid var(--color-black);
}
.maindata__button {
  margin-top: 18px;
  font-size: 15px;
  width: 180px;
  padding: 6.5px 20px;
  color: var(--color-white);
  background-color: var(--color-green);
  border: 1px solid var(--color-black);
}
.maindata__button:hover {
  background-color: var(--color-gray-light);
  color: var(--color-green);
}
.maindata__ingr {
  position: relative;
  width: 100%;
  height: 120px;
  background-image: url(/storage/images/ingr.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.maindata__img {
  position: relative;
  width: 100%;
  height: 120px;
}
.maindata__photosource {
  font-size: 15px;
  color: var(--color-grey-dark);
  position: absolute;
  bottom: 0px;
}

.ingr__button {
  position: absolute;
  top: 45%;
  width: 355px;
  background-color: var(--color-gray-light);
  padding: 2px 5px;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-black);
  text-decoration: none;
  border: 1px solid var(--color-black);
}
.ingr__button:hover {
  background-color: var(--color-green);
  color: var(--color-white);
}

.ingr__overlay {
  position: absolute;
  top: 0%;
  min-height: 120px;
  background-color: var(--color-gray-light);
  display: none;
  z-index: 10;
}

.ingr__overlay__open {
  display: flex;
}

.ingr__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
}
.ingr__close:hover {
  transition: 0.5s;
  transform: scale(1.3);
}

/******************************** Planshet 1160px******************************/
@media (max-width: 1160px) {
  .maindata__selblocks {
    flex-wrap: wrap;
  }
  .maindata__button {
    width: 160px;
  }
  .maindata__ingr {
    height: 170px;
  }
  .maindata .ingr__overlay {
    min-height: 170px;
  }
  .maindata .ingr__button {
    top: 39%;
  }
}
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .maindata__selblocks {
    height: 180px;
    justify-content: space-around;
    margin-bottom: 80px;
  }
  .maindata__ingr {
    height: 240px;
  }
  .maindata .ingr__overlay {
    min-height: 240px;
  }
  .maindata .ingr__button {
    top: 42%;
  }
}
/******************************** Phone 400px*********************************/
@media (max-width: 400px) {
  .maindata__selblocks {
    max-width: 400px;
    height: 240px;
  }
  .maindata__selblock {
    width: 160px;
    justify-content: space-around;
  }
  .maindata__ingr {
    height: 260px;
  }
  .maindata .ingr__overlay {
    min-height: 260px;
  }
  .maindata .ingr__button {
    width: 300px;
    top: 46%;
  }
}
/******************************** Phone 360px*********************************/
@media (max-width: 360px) {
  .maindata__selblocks {
    max-width: 360px;
  }
  .maindata__selblock {
    width: 130px;
  }
  .maindata__label {
    font-size: 13px;
  }
  .maindata__list {
    font-size: 13px;
    width: 130px;
  }
  .maindata__button {
    width: 130px;
  }
  .maindata__ingr {
    height: 260px;
  }
  .maindata .ingr__overlay {
    min-height: 260px;
  }
  .maindata .ingr__button {
    top: 46%;
  }
}
.daily {
  padding: 30px 0 30px 0;
}
.daily__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
}
.daily__blocks {
  max-width: 1170px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.daily__block {
  max-width: 580px;
}
.daily__img {
  width: 580px;
}
.daily__photosource {
  font-size: 15px;
  color: var(--color-gray);
}
.daily__text {
  max-width: 580px;
  margin-bottom: 30px;
}
.daily__texttitle {
  font-size: 32px;
  line-height: 1.5;
  font-weight: 500;
}
.daily__textsm {
  font-size: 28px;
  color: var(--color-green);
  margin-top: 10px;
}
.daily__name {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.1;
  color: var(--color-violet);
}
.daily__name:hover {
  text-decoration: underline;
}
.daily__textitalic {
  color: var(--color-green);
}
.daily__ingr {
  font-weight: bold;
  font-style: italic;
  color: var(--color-violet);
}
.daily__ingr:hover {
  text-decoration: underline;
}

/***************************************************************************/
.blback {
  background-image: url(/storage/images/popular1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
@media (max-width: 1160px) {
  .daily__blocks {
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
  }
}
/******************************** Phone 788px*********************************/
.popular {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
  padding: 30px 0 30px 0;
}
.popular__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  margin-bottom: 20px;
}
.popular__blocks {
  max-width: 1170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.popular__block {
  width: 31.6%;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.popular__blocksm {
  width: 100%;
  height: 250px;
  position: relative;
  margin-bottom: 10px;
}
.popular__name {
  height: 60px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.1;
  color: var(--color-violet);
}
.popular__blocklt {
  width: 100%;
  height: 115px;
}
.popular__img {
  width: 370px;
  height: 250px;
}
.popular__photosource {
  font-size: 15px;
  color: var(--color-grey-dark);
  position: absolute;
  bottom: 0px;
}
.popular__text {
  max-width: 580px;
  margin-bottom: 30px;
}
.popular__textblock {
  height: 56px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  padding: 0px 4px;
}
.popular__textblock:hover {
  height: 480px;
  background-color: var(--color-gray-light);
  position: relative;
  top: -360px;
  display: block;
  padding-top: 10px;
  transform: scale(1);
  will-change: transform;
  transition: transform 0.4s;
}
.popular__textitalic {
  color: var(--color-green);
}
/***************************************************************************/
.blback {
  background-image: url(/storage/images/popular1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
@media (max-width: 1160px) {
  .popular__blocks {
    align-items: center;
    justify-content: center;
  }
  .popular__block {
    width: 370px;
    margin-right: 25px;
  }
}
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .popular__block {
    max-width: 370px;
    margin-right: 0px;
  }
}
.advertscomp {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
  padding: 30px 0 30px 0;
}
.advertscomp__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
}
.advertscomp__top {
  padding: 20px 2px;
  background-color: var(--color-gray-light);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.advertscomp__link {
  color: var(--color-green);
}
.advertscomp__link:hover {
  text-decoration: underline;
}
.advertscomp__blocks {
  max-width: 1170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.advertscomp__block {
  width: 48.7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.advertscomp__blocksm {
  width: 50%;
  height: 250px;
  overflow: hidden;
  margin-right: 10px;
  background-color: var(--color-gray-light);
}
.advertscomp__blocklt {
  width: 50%;
  height: 250px;
  overflow: hidden;
}
.advertscomp__textsource {
  font-size: 15px;
  color: var(--color-gray);
  padding-left: 5px;
}
.advertscomp__name {
  height: 40px;
  font-weight: bold;
  color: var(--color-violet);
}
.advertscomp__textp {
  font-size: 16px;
  line-height: 18px;
}
.advertscomp__blockempty {
  width: 370px;
}
.advertscomp__img {
  max-width: 370px;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.advertscomp__logo {
  width: 20px;
  height: 20px;
  float: left;
  padding-top: 1px;
}
.advertscomp__logoimg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/***************************************************************************/
.blback {
  background-image: url(/storage/images/popular1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .advertscomp__blocks {
    justify-content: center;
  }
  .advertscomp__block {
    width: 570px;
  }
}
.newscomp {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
  padding: 30px 0 30px 0;
}
.newscomp__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
}
.newscomp__top {
  padding: 20px 2px;
  background-color: var(--color-gray-light);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.newscomp__link {
  color: var(--color-green);
}
.newscomp__link:hover {
  text-decoration: underline;
}
.newscomp__blocks {
  max-width: 1170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.newscomp__block {
  width: 31.6%;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.newscomp__blocksm {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: var(--color-gray-light);
}
.newscomp__textsource {
  font-size: 15px;
  color: var(--color-gray);
}
.newscomp__blocklt {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.newscomp__name {
  height: 40px;
  font-weight: bold;
  color: var(--color-violet);
}
.newscomp__textblock {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  padding: 0px 4px;
}
.newscomp__textp {
  font-size: 16px;
  line-height: 18px;
}
.newscomp__blockempty {
  width: 370px;
}
.newscomp__img {
  width: 370px;
  -o-object-fit: cover;
     object-fit: cover;
}
.newscomp__logo {
  width: 35px;
  height: 35px;
  float: left;
  padding-top: 1px;
}

/***************************************************************************/
.blback {
  background-image: url(/storage/images/popular1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
@media (max-width: 1160px) {
  .newscomp__blocks {
    justify-content: center;
  }
  .newscomp__block {
    width: 370px;
    margin-right: 25px;
  }
}
/******************************** Phone 788px*********************************/
.articlescomp {
  min-height: 50vh;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
}
.articlescomp__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
}
.articlescomp__blocks {
  max-width: 1170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.articlescomp__block {
  width: 48.7%;
  height: 530px;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.articlescomp__blocksm {
  width: 100%;
  height: 350px;
  overflow: hidden;
  background-color: var(--color-gray-light);
}
.articlescomp__blocklt {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.articlescomp__name {
  height: 40px;
  font-weight: bold;
}
.articlescomp__textsource {
  font-size: 15px;
  color: var(--color-gray);
}
.articlescomp__blockempty {
  width: 370px;
}
.articlescomp__img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.articlescomp__logo {
  width: 100px;
  float: left;
  margin-top: -25px;
}
.articlescomp__textblock {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  padding: 0px 4px;
}
.articlescomp__textp {
  font-size: 16px;
  line-height: 18px;
}

/***************************************************************************/
.blback {
  background-image: url(/storage/images/ad.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .articlescomp__blocks {
    justify-content: center;
  }
  .articlescomp__block {
    width: 570px;
  }
}
.reference {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  line-height: 22px;
  font-weight: bold;
}
.reference__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
}
.reference__blocks {
  max-width: 1170px;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.reference__block {
  width: 100%;
  margin-bottom: 60px;
  border-radius: 10px;
  overflow: hidden;
}
.reference__blockwd {
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: azure;
}
.reference__blocktitle {
  width: 45%;
  text-align: center;
  margin-top: 40px;
  color: var(--color-green);
  text-transform: uppercase;
}
.reference__blocktext {
  width: 50%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.reference__text {
  font-size: 16px;
  line-height: 18px;
}
.reference__backg {
  background-image: url(/storage/images/reference.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.reference__photosource {
  font-size: 15px;
  color: var(--color-gray);
  align-self: start;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
@media (max-width: 1160px) {
  .reference__blocks {
    height: 400px;
    flex-direction: column;
    justify-content: space-around;
  }
}
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .reference {
    font-size: 14px;
    line-height: 16px;
  }
  .reference__blocktitle {
    width: 70%;
  }
  .reference__blocktext {
    width: 70%;
  }
  .reference__text {
    width: 100%;
    font-size: 12px;
    line-height: 14px;
  }
}
/******************************** Phone 320px*********************************/
@media (max-width: 320px) {
  .reference {
    font-size: 12px;
    line-height: 14px;
  }
  .reference__text {
    font-size: 10px;
    line-height: 12px;
  }
}
.storiescomp {
  min-height: 50vh;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 18px;
}
.storiescomp__title {
  font-family: "Roboto", sans-serif;
  color: var(--color-grey-dark);
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
}
.storiescomp__blocks {
  max-width: 1170px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.storiescomp__block {
  width: 31.6%;
  height: 500px;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.storiescomp__blocksm {
  width: 30%;
  height: 500px;
}
.storiescomp__blocktext {
  width: 50%;
  height: 150px;
  margin-top: 40%;
  font-weight: bold;
  text-align: center;
}
.storiescomp__photosource {
  font-size: 15px;
  color: var(--color-grey-dark);
  position: absolute;
  left: 0px;
  bottom: 0px;
  padding-left: 2px;
}
.storiescomp__backg {
  background-image: url(/storage/images/reference.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .storiescomp__blocks {
    justify-content: center;
  }
  .storiescomp__block {
    width: 370px;
    margin-right: 15px;
  }
}
.footer {
  background-color: var(--color-gray-light);
  display: flex;
  align-items: center;
}
.footer__container {
  margin: 0 auto;
}
.footer__block {
  width: 790px;
  min-height: 150px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__text {
  color: var(--color-black);
}
.footer__link {
  width: 150px;
  color: var(--color-green);
}
.footer__link:hover {
  color: var(--color-black);
  text-decoration: underline;
}

/******************************** Planshet 1160px******************************/
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .footer__block {
    width: 320px;
    min-height: 150px;
    padding: 5px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
.selection {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 20px;
  padding: 30px 0 30px 0;
}
.selection__top {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 2px;
  background-color: var(--color-gray-light);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.selection__link {
  color: var(--color-green);
}
.selection__link:hover {
  text-decoration: underline;
}
.selection__blocks {
  max-width: 790px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.selection__block {
  width: 370px;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.selection__blocksm {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}
.selection__blocklt {
  width: 100%;
  height: 40px;
  overflow: hidden;
}
.selection__name {
  font-size: 18px;
  line-height: 20px;
  font-weight: bold;
}
.selection__namelink:visited {
  color: rgb(87, 87, 214);
}
.selection__text {
  height: 40px;
  font-weight: bold;
  color: var(--color-violet);
}
.selection__blockempty {
  width: 370px;
}
.selection__img {
  width: 370px;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.selection__photosource {
  font-size: 15px;
  color: var(--color-grey-dark);
  position: absolute;
  bottom: 0px;
}

/***************************************************************************/
.blback {
  background-image: url(/storage/images/popular1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .selection__blocks {
    justify-content: center;
  }
}
/******************************** Phone 530px*********************************/
@media (max-width: 530px) {
  .selection {
    max-width: 510px;
  }
}
/******************************** Phone 400px*********************************/
@media (max-width: 400px) {
  .selection {
    max-width: 320px;
  }
}
.product {
  max-width: 790px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 20px;
  padding: 30px 0 30px 0;
}
.product__top {
  font-size: 18px;
  font-weight: bold;
  padding: 20px 2px;
  align-items: center;
  background-color: var(--color-gray-light);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.product__link {
  color: var(--color-violet);
}
.product__link:hover {
  text-decoration: underline;
}
.product__name {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
}
.product__textitalic {
  color: var(--color-green);
}
.product__ingr {
  color: var(--color-green);
  font-style: italic;
  font-weight: bold;
}
.product__ingr:hover {
  text-decoration: underline;
}
.product__title {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  color: aqua;
}
.product__blocks {
  max-width: 790px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(188, 197, 203, 0.2);
}
.product__block {
  max-width: 480px;
  min-height: 250px;
  margin-bottom: 10px;
}
.product__blocktext {
  width: 300px;
  padding: 2px 5px;
  margin-bottom: 10px;
}
.product__blocklt {
  width: 100%;
  height: auto;
  padding: 2px 5px;
  overflow: hidden;
}
.product__texttitle {
  font-weight: bold;
}
.product__textsm {
  font-size: 28px;
  margin-top: 10px;
}
.product__textbold {
  font-size: 20px;
  margin-top: 10px;
}
.product__textinstr {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.product__img {
  width: 580px;
  max-width: 100%;
}
.product__photosource {
  font-size: 15px;
  color: var(--color-gray);
}

/***************************************************************************/
.blback {
  background-image: url(/storage/images/popular1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.blpict {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/******************************** Planshet 1160px******************************/
/******************************** Phone 788px*********************************/
@media (max-width: 788px) {
  .product {
    padding: 0px 30px;
    margin-top: 20px;
  }
  .product__blocks {
    flex-direction: column;
  }
  .product__block {
    margin: 0 auto;
  }
  .product__blocktext {
    max-width: 480px;
  }
}
/******************************** Phone 530px*********************************/
@media (max-width: 530px) {
  .product {
    max-width: 480px;
    padding: 0px 0px;
  }
  .product__block {
    max-width: 480px;
    min-height: 400px;
  }
  .product__blocktext {
    min-height: 320px;
  }
  .product__blocklt {
    min-height: 500px;
  }
}
/******************************** Phone 400px*********************************/
@media (max-width: 400px) {
  .product {
    max-width: 320px;
    padding: 0px 0px;
  }
  .product__block {
    max-width: 320px;
    min-height: 400px;
  }
  .product__blocktext {
    max-width: 320px;
    min-height: 320px;
  }
  .product__blocklt {
    min-height: 600px;
  }
}
/******************************** Phone 300px*********************************/
@media (max-width: 300px) {
  .product {
    max-width: 320px;
  }
  .product__block {
    max-width: 300px;
  }
}/*# sourceMappingURL=app.css.map */