.banner-blog {
  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}

.banner-btns {
  display: flex;
  padding: 16px;
  align-items: flex-start;
  gap: 12px;
  border-radius: 31px;
  background: #f2ede9;
  margin-bottom:30px;
}

.banner-btns > div {
  width: 6px;
  height: 6px;
  background: #cccccc;
  border-radius: 50%;
  cursor: pointer;
}

.banner-btns > div.active {
  width: 39.5px;
  height: 6px;
  background: #666666;
  border-radius: 16px;
}

.banner-blog-body{
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  width: 1376px;
  margin: 0 auto;
}

.banner-blog-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    align-self: stretch;
    margin: 0 auto;
    padding:32px;
    width: 100%;
}

.banner-blog-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  align-self: stretch;
  flex: 1 1 40%;
  flex-basis: 0;
  overflow: hidden;
  height: 100%;
}

.banner-blog-right img {
  width: 100%;
}

.banner-blog-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  min-width: 300px;
  flex: 1 1 60%;
}

.banner-blog-ss{
  display:flex; 
}



.banner-blog-left-center {
    display: flex;
    padding: 64px;
    justify-content: center;
    align-items: center;
    flex: 1 1 70%;
    gap: 72px;
    /* flex: 1 0 0; */
    background: linear-gradient(0deg, #ff6353 0%, #ff6353 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 42px;
    height: calc(100% - 128px);
}

.banner-blog-left-center-tag span {
  color: var(--Basic-White, #fff);

  /* Body/Overline */
  font-family: "Ubuntu";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 150% */
  text-transform: uppercase;
}

.banner-blog-left-center-text h3 {
  color: var(--Basic-White, #fff);
  text-align: center;

  /* Headline/H2 */
  font-family: "PP Pangaia";
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 64px */
}

.banner-blog-left-center-text p {
  overflow: hidden;
  color: var(--Basic-White, #fff);
  text-align: center;
  text-overflow: ellipsis;

  /* Body/Small/Regular */
  font-family: "Ubuntu";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.banner-blog-left-center-bodytext {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.banner-blog-left-image {
  display: flex;
  flex: 0 0 30%;
  flex-direction: column;
  align-items: center;
  gap: 72px;
  align-self: stretch;
}

.banner-blog-left-image img {
  width: 100%;
  height: 100%;
}

.banner-blog-right-image {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 72px;
  flex: 1;
  --height: 186px;
}

.banner-blog-right-image img {
  width: 100%;
  height: 100%;
}

.banner-blog-left-center-btn a {
  border-radius: 100px;
  background: var(--Basic-White, #fff);
  color: var(--Basic-Black, #000)!important;

  /* Body/Medium/Regular */
  font-family: "Ubuntu";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.banner-blog-ss{
 transition: transform 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; 
}

@media (min-width: 320px) and (max-width: 480px) {
  
   .banner-blog-left {
          display: flex;
          align-items: flex-start;
          flex: 1 0 0;
          align-self: auto;
          flex-wrap: wrap;
          gap: 12px;
        }

        .banner-blog-left-image {
          width: 100%;
        }

        .banner-blog-left-center {
          display: flex;
          padding: 16px;
          justify-content: center;
          align-items: center;
          gap: 42px;
          align-self: stretch;
        }

        .banner-blog-left-center-text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 16px;
          align-self: stretch;
        }

        .banner-blog-wrapper {
          display: flex;
          height: auto;
          flex-wrap: wrap;
          padding: 0;
          gap: 12px;
        }

        .banner-blog-right {
          display: flex;
          height: auto;
          align-items: flex-start;
          gap: 12px;
          align-self: stretch;
          flex-direction: row;
        }

        .banner-blog-right-image {
          display: flex;
          padding: 0px;
          width: 100%;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 72px;
          flex: 1 0 0;
          align-self: stretch;
        }
  
  .banner-blog-body{
    width: 350px;  
  }
  
  .banner-blog-wrapper{
    width:100%;  
  }
  
  .banner-blog-ss{
    
    gap:32px;
    
  
}