/* Кейс: Латте-Арт */
/* Брейкпоинты: 1350px / 1125px / 800px / 767.98px / 600px */

.latte-art-page {
  background-color: #fff;
}
.latte-art-page * {
  padding: 0;
  margin: 0;
  border: 0;
}
.latte-art-page p {
}
.latte-art-page *,
.latte-art-page *:before,
.latte-art-page *:after {
  box-sizing: border-box;
}
.latte-art-page html,
.latte-art-page body {
  height: 100%;
  min-width: 320px;
}
.latte-art-page body {
  color: #1A1B1D;
  line-height: 1;
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.latte-art-page input,
.latte-art-page button,
.latte-art-page textarea {
  font-family: "Manrope", sans-serif;
  font-size: inherit;
}
.latte-art-page button {
  cursor: pointer;
  color: inherit;
  background-color: inherit;
}
.latte-art-page a {
  color: inherit;
  text-decoration: none;
}
.latte-art-page ul li {
  list-style: none;
}
.latte-art-page img {
  vertical-align: top;
}

body.single-body-class .latte-art-page .container {
  position: relative;
  z-index: 1;
  max-width: 1530px;
  margin: 0 auto;
  padding: 0 15px;
}

/* base (hero) */

.latte-art-base {
  position: relative;
  background-color: #4A2E23;
  height: 100%;
  overflow: hidden;

  @media (min-width:1024px){
    aspect-ratio: 1920 / 1080;

  }
}
.latte-art-base__image {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  width: 100%;
}
.latte-art-base__items {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  position: relative;
  z-index: 1;
}
.latte-art-base__item {
  flex: 1 1 0;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 90px;
}
.latte-art-base__title {
  position: relative;
  font-weight: 400;
  font-size: 46px;
  color: rgba(255, 202, 9, 1);
  line-height: 130%;
  letter-spacing: 1%;
  margin-bottom: 50px;
  max-width: 600px;
}
.latte-art-base__title span {
  color: #fff;
  font-weight: 700;
}
.latte-art-base__title b {
  font-weight: 700;
}
.latte-art-base__text {
  font-weight: 500;
  letter-spacing: 2%;
  font-size: 26px;
  line-height: 150%;
  max-width: min(610px, 58vw);
  margin-bottom: 50px;
  color: #fff;
}
.latte-art-base__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 12px;
  max-width: 520px;
  margin-bottom: 133px;
}
.latte-art-base__tag {
  display: inline-flex;
  align-items: center;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 14px 28px;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  background-color: rgba(98, 48, 26, 0.5);
}

@media (max-width: 1350px) {
  .latte-art-base__title {
    font-size: 38px;
  }
  .latte-art-base__text {
    font-size: 20px;
  }
}

@media (max-width: 1125px) {
  .latte-art-base__item {
    padding-top: 120px;
  }
  .latte-art-base__tags {
    margin-bottom: 140px;
  }
}

@media (max-width: 800px) {
  .latte-art-base__image {
    max-width: 100%;
  }
  .latte-art-base__title,
  .latte-art-base__text {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .latte-art-base__item {
    padding-top: 60px;
  }
  .latte-art-base__title {
    font-size: 28px;
  }
  .latte-art-base__text {
    font-size: 18px;
  }
  .latte-art-base__tags {
    margin-bottom: 60px;
  }
}

@media (max-width: 600px) {
  .latte-art-base__tag {
    padding: 10px 18px;
    font-size: 15px;
  }
}

/* intro */

.latte-art-intro {
  background-color: #fff;
  padding: 100px 0 140px;
}
.latte-art-intro__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 130px;
}
.latte-art-base__logo {
  width: 140px;
  height: 140px;
  margin-bottom: 50px;
}
.latte-art-intro__logo {
  width: 260px;
  height: 260px;
  margin-bottom: 20px;
}
.latte-art-intro__title {
  font-weight: 700;
  font-size: 50px;
  line-height: 120%;
  color: #1A1B1D;
  margin-bottom: 10px;
}
.latte-art-intro__subtitle {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 16px;
  color: #83431b;
  margin-bottom: 34px;
}
.latte-art-intro__text {
  font-weight: 300;
  font-size: 24px;
  line-height: 150%;
  color: rgba(26, 27, 29, 1);
}

@media (max-width: 1350px) {
  .latte-art-intro {
    padding: 80px 0 110px;
  }
  .latte-art-intro__title {
    font-size: 38px;
  }
}

@media (max-width: 1125px) {
  .latte-art-intro__text {
    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  .latte-art-intro {
    padding: 60px 0 70px;
  }
  .latte-art-intro__logo {
    width: 100px;
    height: 100px;
  }
  .latte-art-intro__title {
    font-size: 28px;
  }
  .latte-art-intro__subtitle {
    font-size: 14px;
  }
  .latte-art-intro__text {
    font-size: 16px;
  }
}

/* about */

.latte-art-about {
  background-color: #F4F5F7;
  padding: 120px 0;
}
.latte-art-about__wrapper {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 100px 70px;
  background:
  linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%),
  linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)),
  linear-gradient(#d1dbed, #d1dbed),
  #fdf7f2;
  position: relative;
  border-radius: 20px;
}
.latte-art-about__content {
  min-width: 0;
  max-width: 52%;
}
.latte-art-about__title {
  font-weight: 500;

  color: #1A1B1D;
  margin-bottom: 30px;
  font-size: 50px;

  /* line-height: 55px; */
  line-height: 1.1;
  letter-spacing: 0.04em;
text-transform: uppercase;
}
.latte-art-about__text {
  font-weight: 400;
  font-size: 24px;
  line-height: 160%;
  color: #4A4D52;
  margin-bottom: 40px;
}
.latte-art-about__text:last-child {
  margin-bottom: 0;
}
.latte-art-about__text--bold {
  font-weight: 600;
  color: #1A1B1D;
}
.latte-art-about__media {
  min-width: 0;
  display: flex;
  justify-content: center;

  position: absolute;
  right: 60px;
  bottom: 0;

  max-width: 37%;
}
.latte-art-about__img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1350px) {
  .latte-art-about {
    padding: 90px 0;
  }
  .latte-art-about__title {
    font-size: 36px;
  }
}

@media (max-width: 1125px) {
  .latte-art-about__wrapper {
    gap: 40px;
  }
  .latte-art-about__text {
    font-size: 16px;
  }
}

@media (max-width: 800px) {
  .latte-art-about__wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  .latte-art-about__content {
    max-width: 100%;
  }
  .latte-art-about__media {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .latte-art-about {
    padding: 60px 0;
  }
  .latte-art-about__title {
    font-size: 28px;
  }
  .latte-art-about__text {
    font-size: 15px;
  }
}

@media (max-width: 600px) {
  .latte-art-about__title {
    font-size: 24px;
  }
}

/* task */

.latte-art-task {
  padding: 100px 0;
}
.latte-art-task__title {
  text-transform: uppercase;
  font-size: 50px;
  line-height: 110%;
  color: #1A1B1D;
  font-weight: 300;
  margin-bottom: 70px;
}
.latte-art-task__title b {
  font-weight: 700;
}
.latte-art-task__text {

  font-weight: 400;
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #1a1b1d;

  max-width: 900px;


  margin-bottom: 60px;
}
.latte-art-task__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 60px;
}
.latte-art-task__row {
  display: grid;
  gap: 20px;
}
.latte-art-task__row--two {
  grid-template-columns: repeat(2, 1fr);
}
.latte-art-task__row--three {
  grid-template-columns: repeat(3, 1fr);
}
.latte-art-task__card {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(247, 249, 252, 0.7);
  border: 1px solid rgba(224, 227, 235, 0.98);
  border-radius: 10px;
  padding: 20px 30px 20px 20px;
}
.latte-art-task__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
}
.latte-art-task__icon img {
  width: 100%;
  height: 100%;
}
.latte-art-task__card-text {
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  color: #1A1B1D;
}
.latte-art-task__note {
  max-width: 1150px;

  font-weight: 400;
  font-size: 22px;

  /* line-height: 35px; */
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #1a1b1d;
}

@media (max-width: 1350px) {
  .latte-art-task {
    padding: 90px 0;
  }
  .latte-art-task__title {
    font-size: 40px;
  }
}

@media (max-width: 1125px) {
  .latte-art-task__row--two,
  .latte-art-task__row--three {
    grid-template-columns: repeat(2, 1fr);
  }
  .latte-art-task__text,
  .latte-art-task__note {
    font-size: 17px;
  }
}

@media (max-width: 800px) {
  .latte-art-task__row--two,
  .latte-art-task__row--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .latte-art-task {
    padding: 60px 0;
  }
  .latte-art-task__title {
    font-size: 30px;
  }
  .latte-art-task__card {
    padding: 20px;
    gap: 16px;
  }
  .latte-art-task__icon {
    width: 48px;
    height: 48px;
  }
  .latte-art-task__card-text {
    font-size: 16px;
  }
}

/* solution */

.latte-art-solution {
  padding: 120px 0;
  background: linear-gradient(180deg, #F2F5FA 0%, #F7F9FC 100%);


}
.latte-art-solution__title {
  font-weight: 400;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A1B1D;
  margin-bottom: 40px;
}
.latte-art-solution__title b {
  font-weight: 700;
}
.latte-art-solution__text {
  font-weight: 400;
  font-size: 24px;
  line-height: 160%;
  color: #6B7280;
  margin-bottom: 100px;
}
.latte-art-solution__subtitle {
  font-weight: 400;
  font-size: 24px;
  line-height: 160%;
  color: #1A1B1D;
  margin-bottom: 40px;
}
.latte-art-solution__subtitle b {
  font-weight: 700;
}
.latte-art-solution__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 100px;
}
.latte-art-solution__row {
  display: grid;
  gap: 20px;
}
.latte-art-solution__row--three {
  grid-template-columns: repeat(3, 1fr);
}
.latte-art-solution__row--two {
  grid-template-columns: repeat(2, 1fr);
}
.latte-art-solution__card {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 20px;
  padding: 60px 40px;
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.latte-art-solution__num {
  position: absolute;
  z-index: 0;
  left: 30px;
  bottom: -8px;
  font-weight: 500;
  font-size: 200px;
  line-height: 0.8;
  opacity: 0.3;
  color: #F1F3F7;
  user-select: none;
  background: linear-gradient(180deg, #d1dbed 15.93%, rgba(209, 219, 237, 0) 226.52%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.latte-art-solution__icon {
  position: relative;
  z-index: 1;
  width: 120px;
  height: 120px;
  margin-bottom: 30px;
}
.latte-art-solution__card-text {
  position: relative;
  z-index: 1;
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  color: #1A1B1D;
}
.latte-art-solution__note {
  font-weight: 400;
  font-size: 24px;
  line-height: 160%;
  color: #6B7280;
}

@media (max-width: 1350px) {
  .latte-art-solution {
    padding: 90px 0;
  }
  .latte-art-solution__title {
    font-size: 40px;
  }
  .latte-art-solution__text,
  .latte-art-solution__subtitle,
  .latte-art-solution__note {
    font-size: 20px;
  }
}

@media (max-width: 1125px) {
  .latte-art-solution__row--three,
  .latte-art-solution__row--two {
    grid-template-columns: repeat(2, 1fr);
  }
  .latte-art-solution__text {
    margin-bottom: 70px;
  }
  .latte-art-solution__grid {
    margin-bottom: 70px;
  }
}

@media (max-width: 800px) {
  .latte-art-solution__row--three,
  .latte-art-solution__row--two {
    grid-template-columns: 1fr;
  }
  .latte-art-solution__card {
    min-height: 0;
    padding: 40px 30px;
  }
  .latte-art-solution__text br,
  .latte-art-solution__note br,
  .latte-art-solution__subtitle br {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .latte-art-solution {
    padding: 60px 0;
  }
  .latte-art-solution__title {
    font-size: 30px;
  }
  .latte-art-solution__text,
  .latte-art-solution__subtitle,
  .latte-art-solution__note {
    font-size: 17px;
  }
  .latte-art-solution__num {
    font-size: 140px;
    left: 15px;
  }
  .latte-art-solution__icon {
    width: 90px;
    height: 90px;
    margin-bottom: 20px;
  }
  .latte-art-solution__card-text {
    font-size: 17px;
  }
}

/* stats */

.latte-art-stats {
  padding: 200px 0;
}
.latte-art-stats__title {
  font-weight: 300;
  font-size: 80px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1b1d;
  margin-bottom: 30px;
}
.latte-art-stats__title b {
  font-weight: 600;
}
.latte-art-stats__subtitle {
  font-weight: 400;
  font-size: 26px;

  /* line-height: 39px; */
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #6a768d;
  margin-bottom: 90px;
}
.latte-art-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.latte-art-stats__card {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
  min-height: 340px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  text-align: left;

  border: 1px solid #d1dbed;
}
.latte-art-stats__card--media {
  padding: 0;
}
.latte-art-stats__media {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.latte-art-stats__prefix {
  font-weight: 400;
  font-size: 22px;
  line-height: 140%;
  color: #4B5563;
  flex-shrink: 0;
  align-self: center;
}
.latte-art-stats__num {
  font-weight: 300;
  font-size: 180px;
  line-height: 1;
  color: #1A1B1D;
  flex-shrink: 0;
  white-space: nowrap;
}
.latte-art-stats__text {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #636c7d;
}
.latte-art-stats__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.latte-art-stats__feature {
  background-color: #fff;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border: 1px solid #d1dbed;
  border-radius: 10px;
}
.latte-art-stats__feature-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.latte-art-stats__feature-text {
  font-weight: 400;
  font-size: 22px;

  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #636c7d;
  }

@media (max-width: 1350px) {
  .latte-art-stats {
    padding: 90px 0;
  }
  .latte-art-stats__title {
    font-size: 40px;
  }
  .latte-art-stats__subtitle {
    font-size: 20px;
    margin-bottom: 60px;
  }
  .latte-art-stats__num {
    font-size: 140px;
  }
  .latte-art-stats__card {
    min-height: 280px;
    padding: 30px;
  }
}

@media (max-width: 1125px) {
  .latte-art-stats__num {
    font-size: 110px;
  }
  .latte-art-stats__text,
  .latte-art-stats__feature-text {
    font-size: 18px;
  }
  .latte-art-stats__features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .latte-art-stats__grid {
    grid-template-columns: 1fr;
  }
  .latte-art-stats__card {
    min-height: 220px;
  }
  .latte-art-stats__card--media {
    min-height: 0;
  }
  .latte-art-stats__subtitle br {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .latte-art-stats {
    padding: 60px 0;
  }
  .latte-art-stats__title {
    font-size: 30px;
  }
  .latte-art-stats__subtitle {
    font-size: 17px;
  }
  .latte-art-stats__num {
    font-size: 90px;
  }
  .latte-art-stats__text,
  .latte-art-stats__feature-text {
    font-size: 16px;
  }
  .latte-art-stats__feature {
    padding: 26px 20px;
  }
}

@media (max-width: 600px) {
  .latte-art-stats__card {
    padding: 24px;
    gap: 16px;
  }
  .latte-art-stats__num {
    font-size: 70px;
  }
}

/* product */

.latte-art-product {
  padding: 120px 0;
  background: linear-gradient(180deg, #F5F7FA 0%, #F0F3F8 100%);
}
.latte-art-product__title {
  font-weight: 400;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A1B1D;
  margin-bottom: 40px;
}
.latte-art-product__title b {
  font-weight: 700;
}
.latte-art-product__text {
  font-weight: 400;
  font-size: 24px;
  line-height: 160%;
  color: #6B7280;
  margin-bottom: 90px;
}
.latte-art-product__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 90px;
}
.latte-art-product__card {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #fff;
  border-radius: 14px;
  padding: 24px 30px;
}
.latte-art-product__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
}
.latte-art-product__card-text {
  font-weight: 500;
  font-size: 20px;
  line-height: 140%;
  color: #1A1B1D;
}
.latte-art-product__note {
  font-weight: 400;
  font-size: 24px;
  line-height: 160%;
  color: #6B7280;
}

@media (max-width: 1350px) {
  .latte-art-product {
    padding: 90px 0;
  }
  .latte-art-product__title {
    font-size: 40px;
  }
  .latte-art-product__text,
  .latte-art-product__note {
    font-size: 20px;
  }
  .latte-art-product__text,
  .latte-art-product__grid {
    margin-bottom: 60px;
  }
}

@media (max-width: 1125px) {
  .latte-art-product__card-text {
    font-size: 18px;
  }
}

@media (max-width: 800px) {
  .latte-art-product__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .latte-art-product__text br,
  .latte-art-product__note br {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .latte-art-product {
    padding: 60px 0;
  }
  .latte-art-product__title {
    font-size: 30px;
  }
  .latte-art-product__text,
  .latte-art-product__note {
    font-size: 17px;
  }
  .latte-art-product__card {
    padding: 18px 20px;
    gap: 14px;
  }
  .latte-art-product__card-text {
    font-size: 16px;
  }
  .latte-art-product__icon {
    width: 26px;
    height: 26px;
  }
}