@font-face {
  font-family: 'OpenSans-Bold';
  src: url('fonts/OpenSans-Bold.ttf') format('ttf');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


*,
::before,
::after {
  box-sizing: border-box;
}

:where(ul, ol):where([class]) {
  padding-left: 0;
}

body,
:where(blockquote, figure):where([class]) {
  margin: 0;
  overflow-x: hidden;
}


:where(h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl):where([class]) {
  margin-block: 0;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(fieldset[class]) {
  margin-left: 0;
  padding: 0;
  border: none;
}

:where(ul[class]) {
  list-style: none;
}

:where(address[class]) {
  font-style: normal;
}

p {
  --paragraphMarginBottom: 24px;

  margin-block: 0;
}

p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}

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

input,
textarea,
select,
button {
  font: inherit;
}

html {
  height: 100%;
  background-color: #F7F3F0;
  font-size: 16px;
}

html,
:has(:target) {
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  line-height: 1.5;
  max-width: 1920px;
  margin: 0 auto;
}

svg *[fill] {
  fill: currentColor
}

svg *[stroke] {
  stroke: currentColor
}

svg * {
  transition-property: fill, stroke;
}

ul {
  list-style-type: none;
}


@media (prefers-reduced-motion: reduce) {

  *,
  ::before,
  ::after {
    animation-duration: 0.03s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.03s !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(100%) !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

:root {
  --color-white: #ffffff;
  --color-black: #131313;
  --color-black-alternate: #383838;
  --color-gray: #5B5858;
  --color-border: #545050;
  --color-orange: #C74817;
  --color-yellow: #D3A863;
  --color-pink: #EE2852;
  --color-link: #3C3C3C;
  --color-orangr-alternate: #a03b13;

  --border: 1px solid var(--color-border);
  --container-width: 1300px;

  --font-family-title: 'OpenSans-Bold', sans-serif;
  --font-family-subtitle: 'OpenSans-Regular', sans-serif;

  --input-height: 63px;
  --transition-duration: 0.5s;
}

a {
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-family-title);
}

.section-title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 3rem;
  line-height: 55px;
  text-transform: uppercase;
  color: var(--color-black);
}

.title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 30px;
  text-transform: uppercase;
  color: var(--color-black);
}

.subtitle {
  font-family: var(--font-family-subtitle);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 30px;
  color: var(--color-black-alternate);
}

.text-title {
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 45px;
  text-transform: uppercase;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
}

.button {
  justify-items: center;
  border: none;
  text-transform: uppercase;
  font-family: var(--font-family-title);
  font-weight: 700;
}

.button:hover {
  cursor: pointer;
}

.subscribe-button:hover,
.view-more-button:hover {
  background-color: var(--color-orangr-alternate);
}


.header-container a:hover {
  color: var(--color-orange);
}

.basket-button {
  display: flex;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: none;
  background-color: transparent;
  align-items: center;
  justify-content: center;
}

.basket-button:hover {
  background-color: var(--color-orange);
}

.header__widget-wrapper a:hover {
  color: var(--color-orange);
}

.header__widget-wrapper img:hover {
  background-color: var(--color-orange);
}

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

.header__link-wrapper ul {
  display: flex;
  font-size: 0.9375rem;
  line-height: 25px;
  letter-spacing: 2.25px;
  font-weight: 700;
  gap: 40px;
  padding-left: 22.846%;
}

.header__link-wrapper a {
  color: var(--color-link);
  padding: 20px 0;
}

.header__widget-wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
  height: 117px;
}

.contact-button {
  width: 153px;
  height: 50px;
  background-color: var(--color-yellow);
  font-size: 0.875rem;
  line-height: 28px;
  letter-spacing: 2.1px;
  color: var(--color-white);
}

.contact-button:hover {
  background-color: #c79038;
}

.main {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

.main::before {
  position: absolute;
  content: '';
  width: 166px;
  height: 266px;
  top: 14%;
  left: 1%;
  z-index: 1;
  background: url(./icons/img_pseudo/main_colored-plant.svg) center/contain no-repeat;
}

.main::after {
  position: absolute;
  content: '';
  width: 57px;
  height: 46px;
  top: 22%;
  right: 8%;
  transform: rotate(357deg);
  background: url(./icons/img_pseudo/main_bee1.svg) center/contain no-repeat;
}

.header__banner {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  padding-top: 42px;
}

.header__banner::before {
  position: absolute;
  content: '';
  width: 9.56%;
  height: 236px;
  left: 0%;
  top: 7%;
  background: url(./icons/img_pseudo/header_plant_black.svg) center/contain no-repeat;
}

.header__banner::after {
  position: absolute;
  content: '';
  width: 9.8%;
  height: 25%;
  right: 1%;
  bottom: 17%;
  background: url(./icons/img_pseudo/header_plant_black2.svg) center/contain no-repeat;
}

.banner_text-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 31.413%;
  padding-top: 150px;
}

.banner_text-wrapper::before {
  content: '';
  position: absolute;
  width: 8.54%;
  height: 6.6%;
  top: 8%;
  right: 39%;
  transform: rotate(4deg);
  background: url(./icons/img_pseudo/bee1.svg) center/contain no-repeat;
}

.banner_text-wrapper::after {
  content: '';
  position: absolute;
  width: 4.6%;
  height: 7.21%;
  bottom: 43%;
  left: 12%;
  background: url(./icons/img_pseudo/bee5.svg) center/contain no-repeat;
}

.banner_subtitle {
  max-width: 270px;
  color: var(--color-black);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 25px;
  letter-spacing: 5px;
  padding-left: 10px;
}

.banner_title {
  display: flex;
  font-size: 8.5rem;
  line-height: 113px;
  padding-top: 5px;
}

.banner_description {
  max-width: 450px;
  padding-top: 45px;
  padding-left: 10px;
}

.view-more-button {
  margin-left: 10px;
  margin-top: 20px;
  width: 170px;
  height: 60px;
  background-color: var(--color-orange);
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 1rem;
  line-height: 28px;
  letter-spacing: 2.4px;
  color: var(--color-white);
  text-transform: uppercase;
}

.view-more-button a {
  padding: 25px 20px;
  font-family: var(--font-family-title);
  width: 100%;
  font-weight: 700;
  font-size: 1rem;
  line-height: 28px;
  letter-spacing: 2.4px;
  color: var(--color-white);
}

.banner_img-wrapper {
  position: relative;
}

.banner_img-jar {
  position: relative;
  padding-left: 1.319%;
}

.banner_img-jar::before {
  position: absolute;
  content: '';
  width: 40%;
  height: 12%;
  right: 2%;
  top: 13%;
  background-image: url(./icons/img_pseudo/header_dooted-line.svg);
}

.banner_img-jar::after {
  position: absolute;
  content: '';
  width: 4.38%;
  height: 5.48%;
  right: 3%;
  top: 10%;
  background: url(./icons/img_pseudo/black_bee.svg) center/contain no-repeat;
}


.banner_img-wrapper::before {
  content: '';
  position: absolute;
  width: 57px;
  height: 38px;
  top: 17%;
  left: 11%;
  background-image: url(./icons/img_pseudo/bee2.svg);
}

.banner_img-wrapper::after {
  content: '';
  position: absolute;
  width: 8.54%;
  height: 6.6%;
  top: 9%;
  right: 31%;
  background: url(./icons/img_pseudo/bee4.svg) center/contain no-repeat;
}


.banner_img-text {
  position: absolute;
  width: 23.44%;
  right: 11.8%;
  top: 26%
}

.text-section {
  display: grid;
  grid-template-columns: 61.53846% 32.3846154%;
  gap: 84px;
  padding-top: 50px;
}

.mission-section {
  display: flex;
  flex-direction: column;
}

.mission_img {
  position: relative;
}

.mission_img::before {
  position: absolute;
  content: '';
  width: 59%;
  height: 185px;
  top: -38%;
  left: 25%;
  z-index: -1;
  background-image: url(./icons/img_pseudo/header_dotted-line2.svg);

}

.play_button {
  position: absolute;
  width: 14%;
  height: 21%;
  border-radius: 50%;
  background: url(./icons/button_play.svg) center/contain no-repeat;
  background-color: var(--color-white);
  background-position: 80%;
}

.play_button:hover {
  background-color: var(--color-link);
}


.play_button a:hover {
  color: var(--color-orangr-alternate);
}


.mission_img-button {
  top: 40%;
  left: 42%;
}

.mission_text-title {
  max-width: 160px;
  padding-top: 28px;
}

.mission_text-subtitle {
  padding-top: 27px;
  max-width: 720px;
}

.mission_text_paragraph {
  max-width: 710px;
  padding-top: 33px;
}

.mission_text-sign {
  padding-top: 34px;
  padding-left: 60px;
}

.news-section {
  background-color: var(--color-white);
  padding: 40px 0 72px 40px;
}

.news-section_item {
  display: flex;
  flex-direction: column;
  padding-top: 44px;
}

.news_item-date {
  font-family: var(--font-family-title);
  color: var(--color-orange);
  font-weight: 700;
  font-size: 13px;
  line-height: 25px;
  letter-spacing: 1.3px;
}

.news_item-title {
  padding-top: 5px;
  max-width: 322px;
}

.news_item-subtitle {
  font-family: var(--font-family-subtitle);
  color: var(--color-gray);
  font-weight: 400;
  padding-top: 14px;
  font-size: 0.9375rem;
  line-height: 24px;
  max-width: 332px;
}

.news-section_button {
  margin-top: 28.50356%;
  background-color: transparent;
  font-weight: 700;
  color: var(--color-black);
  font-size: 0.8125rem;
  font-family: var(--font-family-title);
  line-height: 28px;
  letter-spacing: 1.95px;
}

.news-section_button:hover {
  color: var(--color-orange);

}

.products {
  position: relative;
  max-width: 1920px;
  padding-top: 86px;
}

.products::after {
  position: absolute;
  content: '';
  width: 477px;
  height: 72px;
  bottom: 83%;
  right: -2%;
  transform: rotate(62deg);
  transform: rotate(45deg);
  background-image: url(./icons/img_pseudo/header_dotted-line2.svg);
}

.products::before {
  position: absolute;
  content: '';
  width: 4.3%;
  height: 4%;
  bottom: 88%;
  right: 10%;
  background: url(./icons/img_pseudo/bee4.svg) center/contain no-repeat;
}

.products_title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
}

.products_subtitle {
  max-width: 620px;
  text-align: center;
  padding-top: 12px;
}

.products_inner {
  display: grid;
  padding-top: 25px;
  grid-template-columns: repeat(auto-fill, 29.2308%);
  gap: 6.153846%;

}

.products_item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product_item-title {
  font-family: var(--font-family-title);
  color: var(--color-black);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 32px;
  max-width: 130px;
  text-align: center;
}

.product_item-price {
  padding-top: 10px;
  font-family: var(--font-family-title);
  color: var(--color-orange);
  font-size: 1.375rem;
  line-height: 30px;
}

.product_item-subtitle {
  max-width: 360px;
  padding-top: 10px;
  font-family: var(--font-family-subtitle);
  color: var(--color-gray);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 25px;
  text-align: center;
}

.add-to-cart_button {
  background-color: transparent;
  width: 220px;
  display: flex;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 28px;
  letter-spacing: 1.95px;
  padding: 20px;
  color: var(--color-black);
  align-items: center;
  justify-content: center;
}

.add-to-cart_button:hover {
  color: var(--color-orange);
}

.product_biologist {
  position: relative;
  padding-top: 124px;
  display: grid;
  grid-template-columns: 24% 65.3847%;
  gap: 5.69230%;
}

.product_biologist::before {
  content: '';
  position: absolute;
  width: 5.462%;
  height: 15.51%;
  top: 21%;
  left: 20%;
  translate: -100% 0;
  background: url(./icons/quotes.svg) center/contain no-repeat;
}

.product_biologist-inner {
  display: flex;
  flex-direction: column;
  padding-top: 45px;
}

.product_biologist-subtitle {
  font-family: var(--font-family-subtitle);
  font-weight: normal;
  font-style: italic;
  font-size: 26px;
  line-height: 38px;
  color: var(--color-gray);
}

.product_biologist-data {
  display: flex;
  flex-direction: column;
  padding-top: 50px;
  min-width: 90px;
}

.product_biologist-profession {
  padding-top: 15px;
  font-family: var(--font-family-title);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 25px;
  letter-spacing: 1.95px;
  color: var(--color-orange);
}

.gallery_title-wrapper {
  padding-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.gallery_img-wrapper {
  padding-top: 65px;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 420px));
  gap: 20px;
  margin: 0 auto;
}

.subscribe {
  padding-top: 10px;
  display: flex;
  gap: 60px;
}

.subscribe_sign {
  display: flex;
  flex-direction: column;
  max-width: 650px;
  padding-top: 128px;
}

.subscribe_sign-subtitle {
  padding-top: 32px;
}

.subscribe_placeholder {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding-top: 55px;
}

.subscribe_input {
  width: 65.078%;
  height: 62px;
  color: var(--color-black-alternate);
  font-size: 1ren;
  font-family: var(--font-family-subtitle);
  border-radius: 0;
  border: 1px solid color(var(--color-border));
}

.subscribe_input:valid {
  border: 2px solid var(--color-border);
}

.subscribe-button {
  width: 34%;
  height: 62px;
  background-color: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-family-title);
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 26px;
  letter-spacing: 2.4px;
  font-weight: 700;
}

.subscribe-button a {
  color: var(--color-white);

}

.honey-types_title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

.honey-types_items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 53px;
  gap: 20px;
}

.honey-types_card {
  display: grid;
  grid-template-columns: 39.84375% 1fr;
  background-color: var(--color-white);
}

.types_card-img {
  padding: 28.8px 44px 28.8px 54px;
}

.types_card-title {
  padding-top: 20px;
  font-family: var(--font-family-title);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 32px;
  max-width: 105px;
  text-transform: uppercase;
}

.types_card-subtitle {
  padding-top: 18px;
  padding-right: 20px;
  font-family: var(--font-family-subtitle);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-gray);
  max-width: 331px;
}

.types_button {
  padding-top: 17px;
}

.learn-more-button {
  background-color: transparent;
  margin-top: 16px;
  margin-bottom: 50px;
  padding: 10px 0 0 10px;
}

.learn-more-button a {
  font-weight: 700;
  font-size: 13px;
  line-height: 28px;
  letter-spacing: 1.95px;
  color: var(--color-orange);
}

.learn-more-button a:hover {
  color: var(--color-orangr-alternate);
}

.keeper {
  max-width: 1920px;
  position: relative;
}

.products-keeper::after {
  position: absolute;
  content: '';
  width: 112px;
  height: 139px;
  top: 495px;
  left: 1%;
  z-index: 1;
  background: url(./icons/img_pseudo/gallery_flower.png) center/contain no-repeat;
}

.products-keeper::before {
  position: absolute;
  content: '';
  width: 4%;
  height: 80px;
  top: 195px;
  left: 10%;
  z-index: 1;
  background: url(./icons/img_pseudo/bee5.svg) center/contain no-repeat;
}

.pseudo-keeper_gallery::after {
  content: '';
  position: absolute;
  width: 148px;
  height: 200px;
  bottom: 52px;
  right: 0%;
  z-index: -1;
  background: url(./icons/img_pseudo/products_honey-drop.png) center/contain no-repeat;
}

.pseudo-keeper_gallery::before {
  position: absolute;
  content: '';
  width: 190px;
  height: 204px;
  left: 1%;
  top: 94px;
  background-image: url(./icons/img_pseudo/header_dotted-line2.svg);
}

.pseudo-keeper_gallery-title::after {
  position: absolute;
  content: '';
  width: 4%;
  height: 40px;
  left: 10%;
  top: 121px;
  transform: rotate(218deg);
  background: url(./icons/img_pseudo/bee2.svg) center/contain no-repeat;
}

.pseudo-keeper_gallery-title::before {
  position: absolute;
  content: '';
  width: 100px;
  height: 220px;
  left: 1%;
  bottom: -1762px;
  z-index: -1;
  background: url(./icons/img_pseudo/sing-up_honey-drops.png) center/contain no-repeat;
}

.pseudo-keeper_footer::after {
  position: absolute;
  content: '';
  width: 3.5%;
  height: 60px;
  right: 2%;
  bottom: 669px;
  transform: rotate(145deg);
  background: url(./icons/img_pseudo/bee5.svg) center/contain no-repeat;
}

.pseudo-keeper_footer::before {
  position: absolute;
  content: '';
  width: 407px;
  height: 89px;
  right: -4%;
  bottom: 452px;
  z-index: -1;
  transform: rotate(288deg);
  background: url(./icons/img_pseudo/header_dotted-line2.svg);
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer_soc1al-wrapper {
  display: flex;
  padding-top: 8.9646%;
  gap: 10px;
}


.footer_logo {
  margin-top: 38px;
  border: none;
  background-color: transparent;
}

.footer p {
  font-family: var(--font-family-subtitle);
  font-weight: 400;
  font-size: 12px;
  line-height: 30px;
  color: var(--color-black);
  margin-top: 9px;
}

@media (max-width:1390px) {

  html {
    font-size: 15px;
  }

  .header__link-wrapper ul {
    padding-left: 0;
    flex-wrap: wrap;
    padding-right: 20px;
  }

  .header__banner {
    margin: auto;
    grid-template-columns: 1fr 40%;
   padding-top: 70px;
  }

  .banner_text-wrapper {
    padding-left: 11%;
  }

  .header__banner::after {
    bottom: -6%;
  }


  .banner_title {
    font-size: 6.5rem;
  }

  .banner_text-wrapper {
    padding-bottom: 60px;
    padding-top: 0;
  }

  .banner_text-wrapper::before {
    top: 35%;
    right: 6%;
    transform: rotate(329deg);
  }

  .text-section {
    gap: 20px;
  }

  .container {
    padding: 0 20px;
  }

  .news_item-subtitle {
    padding-right: 10px;
  }

  .main::before {
    top: 33%;
    left: 1%;
    z-index: 1;
  }

  .main::after {
    top: 24%;
    right: 39%
  }

  .pseudo-keeper_footer::before {
    right: 2%;
    bottom: 535px;
    transform: rotate(206deg);
  }

  .pseudo-keeper_footer::after {
    right: 5%;
    bottom: 532px;
    transform: rotate(233deg)
  }
}

@media (max-width:1090px) {

  html {
    font-size: 14px;
  }

  .section-title {
    font-size: 2.5rem;
  }

  .text-title {
    font-size: 2rem;
  }

  .title {
    font-size: 1.2rem;
  }

  .header-container {
    display: grid;
    padding-top: 20px;
    row-gap: 10px;
  }

  .header-container ul {
    justify-content: center;
  }

  .header_logo {
    grid-column: 1/1;
  }

  .header__widget-wrapper {
    grid-column: 2/2;
    grid-row: 1/1;
  }

  .header__link-wrapper {
    grid-column: 1/3;
  }

  .header__widget-wrapper {
    flex-wrap: wrap-reverse;

  }

  .banner_title {
    font-size: 6rem;
    line-height: 90px;
  }

  .news-section {
    padding-right: 20px;
  }

  .main::after {
    top: 29%;
  }

  .main::before {
    width: 13%;
    height: 5%;
  }

  .subscribe {
    padding-top: 40px;
    display: grid;
    grid-template-columns: 35% auto;
  }

  .subscribe_input,
  .subscribe-button {
    height: 50px;
  }

  .subscribe_sign {
    padding-top: 0;
  }

  .products-keeper::after {
    top: 757px;
    z-index: 0;
  }

  .product_biologist-data {
    padding-top: 20px;
  }

  .product_biologist-subtitle {
    font-size: 1.5rem;
    line-height: 32px;
  }


  .honey-types_items {
    grid-template-columns: minmax(340px, 800px);
    justify-content: center;
    padding-top: 20px;
  }
}

@media (max-width:790px) {

  html {
    font-size: 13px;
  }

  .header-container {
    column-gap: 3%;
    grid-template-columns: 40% auto;
    
  }

  .section-title {
    font-size: 2rem;
  }

  .header_logo {
    grid-row: 1/-1;
  }

  .header__widget-wrapper {
    height: auto;
    grid-row: 1/-1;
    align-items: center;
    justify-content: center;
    align-content: center;
    
  }

  .contact-button {
    width: 100px;
    height: auto;
    font-size: 0.8rem;
  }

  .banner_text-wrapper {
    padding-left: 6%;
    
  }

  .header__link-wrapper {
    grid-column: 1/3;
 
  }

  .header__link-wrapper ul {
    font-size: 0.75rem;
    gap: 25px;
    padding: 0;
    justify-content: space-between;
  }

  .banner_title {
    font-size: 4rem;
    line-height: 60px;
  }

  .subtitle {
    font-size: 1rem;
  }

  .news-section {
    max-width: 600px;
  }

  .text-section {
    grid-template-columns: auto;
  }

  .news-section_button {
    margin-top: 12%;
  }

  .main::before {
    left: 86.5%;
    transform: scale(-1, 1);
  }

  .subscribe {
    grid-template-columns: auto;
    background: url(./images/subscribe_img.svg) center/contain no-repeat;
    justify-items: center;
  }

  .subscribe_img {
    display: none;
  }

  .product_biologist {
    grid-template-columns: auto;
    gap: 0;
  }

  .product_biologist-inner {
    padding-top: 0;
  }

  .product_biologist::before {
    width: 9.462%;
    height: 11.51%;
    top: 13%;
    left: 34%
  }

  .gallery_title-wrapper {
    gap: 0;
  }

  .gallery_img-wrapper {
    grid-template-columns: repeat(2, minmax(160px, 420px))
  }

  .honey-types_title-wrapper {
    padding-top: 80px;
  }
}

@media (max-width:560px) {

  .header__banner {
    grid-template-columns: auto;
    background: url(./icons/banner_image.svg) center/contain no-repeat;
    background-position: right;
  }

  .banner_img-jar {
    display: none;
  }

  .products_inner {
    grid-template-columns: minmax(300px, 400px);
    justify-content: center;
    padding-top: 0;
    gap: 3%;
  }

  .header__link-wrapper ul {
    font-size: 0.55rem;
  }

  .subscribe-button {
    font-size: 0.7rem;
  }

  .product_biologist::before {
    left: 53%;
  }

  .honey-types_card img {
    padding: 20px;
  }

  .products-keeper::after {
    z-index: 1;
  }

  .types_card-title {
    font-size: 1.3rem;
  }

  .types_card-subtitle {
    font-size: 13px;
  }

  .learn-more-button a {
    font-size: 10px;
  }
}