/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
    2. Remove default margin
  */
* {
  margin: 0;
}

/*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: "DM Sans", sans-serif;
}

h1,
h2,
h3, 
h4, 
h5,
h6 {
  line-height: 1;

}

p {
  font-size: 1.125rem;
}


/*
    5. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/*
    6. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}

/*
    7. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
    8. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

:root {
  --Purple-100: hsl(254, 88%, 90%);
--Purple-500: hsl(256, 67%, 59%);

--Yellow-100: hsl(31, 66%, 93%);
--Yellow-500: hsl(39, 100%, 71%);

--White: hsl(0, 0%, 100%);
--Black: hsl(0, 0%, 7%);
}

.container {
  background: var(--Yellow-100);
}

.card {
  width: 90%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 2rem;
  max-width: 25rem;
}

.social__media {
  background-color: var(--Purple-500);
  color: white;
  display: flex;
  gap: .5rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 1rem;
  border-radius: .5rem;
  padding-inline: 1.5rem;
  grid-area: socialMedia;
}

.social__media__title {
  font-size: 3rem;
  font-weight: 500;
}

.social__media__title span {
  color: var(--Yellow-500);
}

.social__media__desc {
  font-size: 1.125rem;
}

.social__media__img {
  width: 60%;
  margin-top: 1rem;
}

.accounts {
  display: grid;
  gap: .5rem;
  background-color: var(--White);
  padding-inline: 1rem;
  padding-block: 1rem;
  border-radius: .5rem;
  grid-area: accounts;
}

.schedule{
  padding-inline: 1rem;
  padding-block: 1rem;
  background-color: var(--Yellow-500);
  display: grid;
  gap: 1rem;
  overflow: hidden;
  border-radius: .5rem;
  grid-area: schedule;
}

.schedule__img {
  width: 70%;
  margin-bottom: -2rem;
}

.schedule__social {
  background-color: var(--Purple-100);
  padding-inline: 1.5rem;
  padding-block: 1.5rem;
  text-align: center;
  display: grid;
  gap: 1rem;
  border-radius: .5rem;
  grid-area: scheduleSocial;
}

.schedule__social__title {
  font-weight: 600;
  font-size: 1.35rem;
}

.schedule__social__img {

}

.grow {
  background-color: var(--Purple-500);
  padding-block: 1.5rem;
  padding-inline: 2rem;
  text-align: center;
  display: grid;
  gap: 2rem;
  border-radius: .5rem;
  grid-area: grow;
}

.grow__title {
  color: white;
  font-weight: 500;
  font-size: 2rem;
}

.grow__img {
  width: 50%;
}

.audience {
  background-color: var(--White);
  display: grid;
  gap: 1rem;
  padding-inline: 1.5rem;
  padding-block: 2rem;
  border-radius: .5rem;
  grid-area: audience;
}

.audience__title {
  font-size: 3rem;
  font-weight: 600;
}

.audience__img {
  width: 60%;
}

.schedule__quicker {
  display: grid;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  grid-area: scheduleQuicker;
}

.schedule__quicker__title {
  font-size: 1.75rem;
}

.schedule__quicker__title span {
  color: var(--Purple-500);
  font-style: italic;
}

.schedule__quicker__img {
  width: 60%;
}

.content {
  background-color: var(--Yellow-500);
  padding: 1.5rem;
  border-radius: .5rem;
  display: grid;
  gap: 1.5rem;
  grid-area: contentItem;
}

.content__title {
  font-size: 2rem;
}

.content__img {
  width: 80%;
}

@media (min-width: 78.125em) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: repeat(7, minmax(100px, 1fr));
    gap: 1rem;
    grid-template-areas: 
    'scheduleQuicker socialMedia socialMedia scheduleSocial'
    'scheduleQuicker socialMedia socialMedia scheduleSocial'
    'scheduleQuicker socialMedia socialMedia scheduleSocial'
    'scheduleQuicker accounts schedule scheduleSocial'
    'contentItem accounts schedule scheduleSocial'
    'contentItem audience grow grow'
    'contentItem audience grow grow';
    max-width: 70rem;
    height: 100vh;
    justify-content: center;
  }

  .schedule__quicker {
    align-self: center;
  }

  .social__media {
    justify-content: center;

  }

  .social__media__img {
    width: 30%;
  }

  .social__media__title {
    font-size: 4rem;
  }

  .accounts {
    overflow: hidden;
    padding-bottom: 3rem;
  }

  .accounts__title {
    font-size: 1.75rem;
    font-weight: 600;
    width: 80%;
    margin-top: 1rem;
  }

  .accounts__img {
    scale: 1.4;
    margin-left: auto;
    margin-right: -4rem;
  }

  .schedule__title {
    font-size: 1.75rem;
    font-weight: 600;
    width: 80%;
  }

  .schedule__img {
    width: 90%;
    margin-top: -.5rem;
  }

  .schedule__social {
    text-align: start;
    overflow: hidden;
    gap: 3.5rem;
    padding-top: 1.5rem;
  }

  .schedule__social__title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .schedule__social__img {
    scale: 1.8;
    margin-left: 5.5rem;
  }

  .schedule__social__desc {
    margin-top: 2rem;
    line-height: 1.1;
    width: 90%;

  }

  .audience__title {
    font-size: 3.5rem;
    font-weight: 500;
  }

  .audience__img {
    width: 75%;
  }

  .content {
    padding-block: 1rem;
  }

  .content__title {
    font-weight: 600;
    width: 90%;
    margin-inline: auto;
  }

  .content__img {
    width: 90%;
    margin-inline: auto;
  }

  .schedule__quicker__title {
    font-size: 2.5rem;
    font-weight: 500;
  }

  .schedule__quicker__img {
    width: 90%;
  }

  .grow {
    display: flex;
    align-items: center;
    text-align: start;
  }

  .grow__title {
    font-size: 2.5rem;
  }

  .grow__img {
    width: 100%;
  }

  .chromeSpecific {
    width: 40%;
  }

  .card__box {
    transition: all .5s;
  }

  .card__box:hover  {
    scale: 1.2;
    cursor: pointer;
    z-index: 99999;
  }
}