#layout-banner {
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 737px;
  background-size: 100% 100%;
}

#layout-banner[data-banner="health-products"] {
  background-image: url("/public/assets/images/health-product-banner.png");
}

#layout-banner[data-banner="children"] {
  background-image: url("/public/assets/images/child-product-banner.png");
}

#layout-banner[data-banner="exotic-products"] {
  background-image: url("/public/assets/images/exotic-product-banner-1.png");
}

#layout-banner > .eg-container {
  height: 100%;
}

#layout-banner > .eg-container > .eg-wrapper {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1rem;
  height: calc(100% - 70px);
  width: 35%;
}

#layout-banner > .eg-container > .eg-wrapper > span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem 2rem;
  border-radius: 90px;
  color: var(--do-white);
  font-size: var(--font-16);
  font-weight: 400;
}

#layout-banner[data-banner="health-products"] > .eg-container > .eg-wrapper > span {
  background: var(--do-green-2);
}

#layout-banner[data-banner="children"] > .eg-container > .eg-wrapper > span {
  background: var(--do-purple);
}

#layout-banner[data-banner="exotic-products"] > .eg-container > .eg-wrapper > span {
  background: var(--do-yellow);
}

#layout-banner > .eg-container > .eg-wrapper > p {
  color: var(--do-white);
  font-family: "DIN Condensed Regular";
  font-size: var(--font-60);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 2px 2px var(--do-black);
}

@media (max-width: 1400px) {
  #layout-banner {
    height: 500px;
  }
}

@media (max-width: 992px) {
  #layout-banner {
    height: 400px;
  }
  #layout-banner > .eg-container > .eg-wrapper {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #layout-banner {
    height: 600px;
    background-size: cover;
  }
  #layout-banner > .eg-container > .eg-wrapper {
    width: 75%;
  }
}

@media (max-width: 576px) {
  #layout-banner > .eg-container > .eg-wrapper {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}