/********************/
/** GENERAL STYLES **/
/********************/

@font-face {
  font-family: "DMSans";
  src: url(../assets/fonts/DMSans-VariableFont_opszwght.ttf);
}

@font-face {
  font-family: "DMSansItalic";
  src: url(../assets/fonts/DMSans-Italic-VariableFont_opszwght.ttf);
}

html {
  font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "DMSans";
  background-color: #f7f7f7;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
}

h2 {
  margin: 0;
}

.img {
  width: 100%;
  height: auto;
}

.rounded {
  border-radius: 1.5rem;
}
/********************/
/** LANDING STYLES **/
/********************/

.landing {
  max-width: 100rem;
  aspect-ratio: 4/3;
}

.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 2rem;
}

/********************/
/** CTA STYLES ******/
/********************/

.cta--section {
  grid-row: 1 / 4;
  grid-column: 1 / 3;
  background-color: #f9eee1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta--section-container {
  width: 75%;
  margin: 5.2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.cta--title {
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
}

.cta--title span {
  color: #7650dc;
  font-family: "DMSansItalic";
  font-weight: 600;
}

.create--post-img {
  width: 90%;
}

/********************/
/** CONTENT STYLES **/
/********************/

.content--section {
  grid-row: 4 / 7;
  grid-column: 1 / 3;
  background-color: #ffcb6b;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content--section-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
}

.content--title {
  font-size: 3rem;
  font-weight: 600;
  line-height: 0.8;
}

/********************/
/** REVIEWS STYLES **/
/********************/

.reviews--section {
  grid-row: 1 / 3;
  grid-column: 3 / 7;
  background-color: #7650dc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reviews--section-container {
  width: 75%;
  text-align: center;
}

.reviews--title {
  color: #fff;
  font-size: 5.2rem;
  text-align: center;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 1.6rem;
}

.reviews--img {
  width: 40%;
}

.total--reviews {
  margin: 0;
  color: #fff;
  font-size: 1.4rem;
}

.percentage {
  color: #ffcb6b;
}

.faster {
  font-family: "DMSansItalic";
}

/********************/
/** ACCOUNTS STYLES **/
/********************/

.accounts--section {
  grid-row: 3 / 5;
  grid-column: 3 / 5;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.accounts--section-container {
  width: 80%;

  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.accounts--img {
  width: 150%;
  box-shadow: 0px 4px 7px #00000028;
  border-radius: 30px;
}

.accounts--title {
  font-size: 2.4rem;
  line-height: 1;
}

/********************/
/** AUDIENCE STYLES */
/********************/

.audience--section {
  grid-row: 5 / 7;
  grid-column: 3 / 5;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.audience--section-container {
  width: 75%;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.audience--title {
  font-size: 5.2rem;
  font-weight: 500;
}

.audience--description {
  margin: 0;
  font-size: 1.6rem;
}

.audience--img {
  width: 90%;
}

/********************/
/** SCHEDULE STYLES */
/********************/

.schedule--section {
  grid-row: 3 / 5;
  grid-column: 5 / 7;
  background-color: #ffcb6b;

  overflow: hidden;
}

.schedule--container {
  margin: 2.4rem auto;
  width: 82%;
}

.schedule--title {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 2rem;
}

/*********************/
/** FOLLOWERS STYLES */
/*********************/

.followers--section {
  grid-row: 5 / 7;
  grid-column: 5 / 9;
  background-color: #7650dc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.followers--title {
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  font-weight: 500;
}

.followers--container {
  display: flex;
  align-items: center;
  width: 90%;
  gap: 0.8rem;
}

.followers--img {
  width: 130%;
}

/*********************/
/***** BTP STYLES ****/
/*********************/

.btp--section {
  grid-row: 1 / 5;
  grid-column: 7 / 9;
  background-color: #dacffc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.btp--title {
  font-size: 2.4rem;
  line-height: 0.9;
}

.btp--container {
  width: 75%;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.btp--img {
  width: 182%;
}

.btp--description {
  font-size: 1.6rem;
  margin: 0;
  line-height: 1;
}