@import url('./fonts.css');

:root {

  /*Colors*/
  --brown: #9b7a62;
  --green: #40cb1b;
  --pink: #f33a76;
  --pink-light: #ffeaf1;
  --white-off: #fef9f7;

  /*Font-families*/
  --ff-1: 'Lato', sans-serif;

  /*Font-sizes*/
  --fs-12: 0.75rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-26: 1.625rem;
  --fs-28: 1.75rem;
  --fs-30: 1.875rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-38: 2.375rem;
  --fs-40: 2.5rem;
  --fs-50: 3.125rem;
  --fs-60: 3.75rem;

  /*Font-weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-bold: 700;
}

/*************
*   RESET    *
*************/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/***************
*   WRAPPER    *
***************/

.wrapper {
  min-width: 20rem;
  max-width: 75rem;
  margin: 0 auto;
  
}

@media screen and (max-width: 77rem) {
  .wrapper {
    padding-inline: 1rem;
  }
}

/******************
*   TYPOGRAPHY    *
******************/

.header {
  font-family: var(--ff-1);
  font-weight: var(--fw-bold);
}

.header-regular {
  font-family: var(--ff-1);
  font-weight: var(--fw-regular);
}

.header-1 {
  font-size: var(--fs-50);
  line-height: var(--fs-60);
}

.header-2 {
  font-size: var(--fs-40);
  line-height: var(--fs-50);
}

.copy {
  font-family: var(--ff-1);
  font-weight: var(--fw-regular);
}

.copy-light {
  font-family: var(--ff-1);
  font-weight: var(--fw-light);
}

.copy-1 {
  font-size: var(--fs-26);
  line-height: var(--fs-36);
}

.copy-2 {
  font-size: var(--fs-22);
  line-height: var(--fs-32);
}

strong {
  font-weight: var(--fw-bold);
}

.brown {
  color: var(--brown);
}

.pink {
  color: var(--pink);
}

.white {
  color: white;
}

.centered {
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .header-1 {
    font-size: var(--fs-40);
    line-height: var(--fs-50);
  }
  
  .header-2 {
    font-size: var(--fs-30);
    line-height: var(--fs-40);
  }

  .copy-1 {
    font-size: var(--fs-22);
    line-height: var(--fs-32);
  }
  
  .copy-2 {
    font-size: var(--fs-18);
    line-height: var(--fs-28);
  }
}

/***********
*   CTA    *
***********/

.cta {
  width: fit-content;
  padding: 1rem 2rem;
  background-color: var(--green);
  border-radius: 1rem;

  color: white;

  font-family: var(--ff-1);
  font-size: var(--fs-26);
  font-weight: var(--fw-bold);
  line-height: var(--fs-36);

  text-transform: uppercase;
  text-align: center;
  text-decoration: none;

}

@media screen and (max-width: 1000px) {
  .cta {
    font-size: var(--fs-18);
    line-height: var(--fs-22);
  }
}

/************
*   HERO    *
************/

.hero {
  background-color: var(--white-off);
  background-image: url('../img/dobra-1-background.jpg');
  background-position: right;
  padding-block: 4rem;
  overflow: hidden;
}

.hero .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.hero-left {
  display: grid;
  gap: 2rem;
}

.hero-right img {
  --gradient: black 80%, transparent;

  width: 120%;
  mask: -o-linear-gradient(var(--gradient));
  mask: -moz-linear-gradient(var(--gradient));
  mask: -webkit-linear-gradient(var(--gradient));
  mask: linear-gradient(var(--gradient));
}

@media screen and (max-width: 1000px) {
  .hero .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 4rem;
  }

  .hero-left {
    justify-items: center;
    text-align: center;
  }
}

/****************
*   AUDIENCE    *
****************/

.audience {
  background-color: var(--white-off);
  padding-block: 4rem;
}

.audience .wrapper {
  display: grid;
  justify-items: center;
  gap: 3rem;
}

.audience-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  max-width: 50rem;
}

.audience-card {
  position: relative;
  border: 0.125rem solid var(--pink);
  border-radius: 3rem;
  padding: 2rem 1rem;

  width: 14rem;
  height: 14rem;

  display: flex;
  justify-content: center;
  align-items: center;
}

.audience-card-label {
  position: absolute;

  top: -1.5rem;
  left: 0;
  right: 0;
  margin: 0 auto;

  width: fit-content;
  padding: 0.5rem;
  background-color: var(--pink);
  border-radius: 1rem;

  color: white;
  font-family: var(--ff-1);
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
}

/***************
*   PILLARS    *
***************/

.pillars {
  background-color: var(--pink-light);
  padding-block: 4rem;
}

.pillars .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  place-items: center;
  grid-template-areas: 
  "headline headline headline"
  "pillar1 image pillar2"
  "pillar1 image pillar3"
  "cta cta cta"
  ;
}

.pillars-headline {
  grid-area: headline;
}

.pillar-1 {
  grid-area: pillar1;
}

.pillar-2 {
  grid-area: pillar2;
}

.pillar-3 {
  grid-area: pillar3;
}

.pillar-1,
.pillar-2,
.pillar-3 {
  display: grid;
  gap: 1rem;
}

.pillar-image {
  grid-area: image;
  width: 150%;
}

.pillars .wrapper .cta {
  grid-area: cta;
}

@media screen and (max-width: 1000px) {
  .pillars .wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: 
    "headline headline"
    "pillar1 pillar2"
    "pillar3 image"
    "cta cta"
    ;
  }
  .pillar-image {
    width: 100%;
  }
}

@media screen and (max-width: 500px) {
  .pillars .wrapper {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
    "headline"
    "pillar1 "
    "pillar2"
    "pillar3"
    "image"
    "cta"
    ;
  }
.pillar-1,
.pillar-2,
.pillar-3 {
  justify-items: center;
  text-align: center;
}

}

/*************
*   GAINS    *
*************/

.gains {
  background-color: var(--white-off);
  padding-block: 4rem;
}

.gains .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: end;
  gap: 1rem;
  grid-template-areas: 
    "header header header"
    "gain1 image image"
    "gain2 image image"
    "gain3 image image"
  ;
}

.gains-header {
  grid-area: header;
  justify-self: center;
}

.gain {
  box-shadow: 6px 6px 16px 1px gray;
  border-radius: 2rem;
  width: 35ch;
  padding: 2rem;
}

.gain-1 {
  grid-area: gain1;
}

.gain-2 {
  grid-area: gain2;
}

.gain-3 {
  grid-area: gain3;
}

.gains-image {
  grid-area: image;
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .gains .wrapper {
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    grid-template-areas: 
      "header header "
      "gain1 gain2"
      "gain3 gain3"
      "image image "
    ;
  }

}

@media screen and (max-width: 700px) {
  .gains .wrapper {
    grid-template-columns: repeat(1, 1fr);
    justify-items: center;
    grid-template-areas: 
      "header"
      "gain1"
      "gain2"
      "gain3"
      "image"
    ;
  }

}

/****************
*   ABOUT-ME    *
****************/

.about-me {
  background-color: var(--pink-light);
  padding-block: 4rem;
}

.about-me .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  gap: 2rem;
}

.about-me-left {
  display: grid;
  gap: 2rem;
}

.about-me-right img {
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .about-me .wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .about-me-left {
    justify-items: center;
    text-align: center;
    max-width: 70ch;
  }
}

/**************
*   FOOTER    *
**************/

.footer {
  background-color: var(--brown);
  padding-block: 4rem;
}
.footer .wrapper {
  display: grid;
  gap: 1rem;
}

.footer a {
  color: currentColor;
}