.design-guides-grid-layout .heading h1 {
  color: #202020;
  font-family: BioRhyme;
  font-size: 42px;
  font-weight: 700;
  line-height: 49.224px;
  margin: 50px 0;
  text-align: center;
}

.design-guides-grid-layout .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
  max-width: 1280px;
  margin: 0 auto;
}

.design-guides-container .design-guides-upper {
  margin-bottom: 18px;
  margin-top: 18px;
}

.design-guides-container .aem-Grid .design-guides-upper>.aem-Grid {
  display: flex;
  gap: 20px;
}

.design-guides-container .cmp-image__image {
  border-radius: 10px 10px 0 0;
  object-fit: cover;
}

/* .design-guides-container .design-guides-upper .teaser {
  height: 579px;
} */

.design-guides-container .cmp-teaser {
  border-radius: 10px;
  background: #F5F4EF;
}

.design-guides-container .cmp-teaser__content {
  padding: 30px;
}

.design-guides-container .cmp-teaser__pretitle {
  color: #202020;
  font-family: Lato;
  font-size: 20px;
  font-weight: 600;
  line-height: 27.7px;
  margin-bottom: 20px;
  min-height: 56px;
  text-transform: capitalize;
  letter-spacing: -0.22px;
}

.design-guides-container .cmp-teaser__action-link {
  display: block;
  color: #7345B2;
  font-family: Lato;
  font-size: 16px;
  font-weight: 400;
  line-height: 18.752px;
  letter-spacing: 0.32px;
  padding: 12px 38px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid #7345B2;
  width: max-content;
  height: 43px;
}

.design-guides-container .design-guides-upper .teaser:first-child {
  width: 66.2%;
}

.design-guides-container .design-guides-upper .teaser:last-child {
  width: 32.2%;
}

.design-guides-container .design-guides-upper .teaser img {
  height: 428px;
}

.design-guides-container .design-guides-bottom>div .responsivegrid>div {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.design-guides-container .design-guides-bottom>div {
  display: flex;
  gap: 20px;
}

.design-guides-container .design-guides-bottom-left-sec,
.design-guides-container .design-guides-bottom-center-sec,
.design-guides-container .design-guides-bottom-right-sec {
  width: 33%;
}

.design-guides-container .ht-290 img {
  height: 290px;
}

.design-guides-container .ht-328 img {
  height: 328px;
}

.design-guides-container .ht-332 img {
  height: 332px;
}

.design-guides-container .ht-524 img {
  height: 524px;
}

.design-guides-container .ht-552 img {
  height: 552px;
}

.design-guides-container .ht-555 img {
  height: 555px;
}

.design-guides-container .img-card-280 {
  height: 254px;
  position: relative;
}

.design-guides-container .img-card-280 .cmp-image {
  background: linear-gradient(180deg, rgba(71, 0, 0, 0.40) -8.75%, rgba(255, 201, 63, 0.00) 110.36%);
  border-radius: 10px;
}

.design-guides-container .img-card-280 img {
  height: 254px;
  mix-blend-mode: multiply;
  border-radius: 10px;
}

.design-guides-container .img-card-280 .cmp-teaser__content {
  position: absolute;
  top: 0;
  padding: 63px 32px 10px;
  text-align: center;
}

.design-guides-container .img-card-280 .cmp-teaser__pretitle {
  color: #FFF;
  text-align: center;
  font-family: Lato;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
}

.design-guides-container .img-card-280 .cmp-teaser__title {
  margin-bottom: 24px;
}

.design-guides-container .img-card-280 .cmp-teaser__title-link {
  color: #FFF;
  text-align: center;
  font-family: Lato;
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

.design-guides-container .img-card-280 .cmp-teaser__action-link {
  color: #FFF;
  font-family: Lato;
  font-size: 18px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.36px;
  border-radius: 30px;
  padding: 12px 39px;
  background: #7345B2;
  margin: 0 auto;
}

.design-ideas-load-more a{
  display: block;
  width: max-content;
  margin: 56px auto 150px;
  color: #7345B2;
  font-family: Lato;
  font-size: 18px;
  font-weight: 700;
  line-height: 23.4px;
  border-radius: 30px;
  border: 1px solid #7345B2;
  padding: 12px 39px;
  cursor: pointer;
}

@media (max-width: 768px) {

  .design-guides-grid-layout .design-guides-container>.aem-Grid.aem-Grid--12.aem-Grid--default--12 {
    margin: 0 20px;
  }

  .design-guides-grid-layout .heading h1 {
    font-size: 26px;
    margin: 86px 20px 44px;
    line-height: 31px;
  }

  .design-guides-container .aem-Grid .design-guides-upper>.aem-Grid {
    display: block;
  }

  .design-guides-container .design-guides-upper .teaser:first-child {
    width: 100%;
  }

  .design-guides-container .design-guides-upper .teaser:last-child {
    width: 100%;
  }

  .design-guides-container .design-guides-upper .teaser {
    margin-bottom: 24px;
  }

  .design-guides-container .design-guides-bottom>div {
    display: block;
  }

  .design-guides-container .design-guides-bottom-left-sec,
  .design-guides-container .design-guides-bottom-center-sec,
  .design-guides-container .design-guides-bottom-right-sec {
    width: 100%;
    margin-bottom: 24px;
  }

  .design-guides-container .design-guides-upper .teaser img,
  .design-guides-container .cmp-image__image {
    height: 275px !important;
  }

  .design-guides-container .cmp-teaser__content {
    text-align: center;
    padding: 24px 20px;
  }

  .design-guides-container .cmp-teaser__pretitle {
    font-size: 18px;
    line-height: normal;
    margin-bottom: 24px;
    min-height: auto;
  }

  .design-guides-container .img-card-280 {
    height: 236px;
  }

  .design-guides-container .img-card-280 .cmp-teaser__pretitle {
    font-size: 18px;
    font-weight: 700;
    line-height: 21.096px;
    margin-bottom: 13px;
  }

  .design-guides-container .img-card-280 img {
    height: 236px !important;
  }

  .design-guides-container .img-card-280 .cmp-teaser__content {
    padding: 40px 20px 10px;
  }

  .design-guides-container .cmp-teaser__action-link {
    font-size: 14px;
    margin: 0 auto;
    height: 44px;
    line-height: 16.408px;
    letter-spacing: 0.28px;
    font-style: normal;
  }

  .design-guides-container .design-guides-bottom>div .responsivegrid>div {
    gap: 24px;
  }

  .design-ideas-load-more a {
    margin: 36px auto 60px;
  }

}