:root{
  --mobile-width: 375px;
  --desktop-width: 1440px;

  --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%);

  --font-size: 18px;
  --container-padding: 1rem;
}

body{
  font-size: var(--font-size);
  background-color: black;
}

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

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

@font-face {
  font-family: "DM Sans500 italic";
  src: url("./assets/fonts/static/DMSans-MediumItalic.ttf");
}

.bento-container{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
  overflow: hidden;

   @media (max-width: 480px){
    display: flex;
    flex-direction: column;
  } 
}

.bento-section-first {
  grid-column: span 3;
  grid-row: span 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--container-padding);
  background-color: var(--yellow-100);
  font-family: "DM Sans500";

  .title{
    font-size: 2.75rem;
    color: var(--black);
    line-height: 2.75rem;
  }

  .emphasis{
    color: var(--purple-500);
  }

  .create-post-img{
    width: 15rem;
    margin-top: 1rem;
  }

  @media (max-width: 480px){
    order: 7;

    .title{
      font-size: 2rem;
      line-height: 2rem;
    }
    
  } 
}

.bento-section-second {
  grid-column: span 6;
  grid-row: span 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--container-padding);
  background-color: var(--purple-500);
  font-family: "DM Sans500";

  .emphasis{
    color: var(--yellow-500);
  }

  .img-height{
    height: 1.75rem;
  }

  .title{
    font-weight: bold;
    font-size: 4rem;
    color: var(--white);
    text-align: center;
  }

  .text{
    color: var(--white);
  }

  @media (max-width: 480px){
    order: 1;

    .img-height{
      height: 2rem;
    }

    .title{
      font-size: 3rem;
      text-wrap-style: balance;
    }

    
  } 
}

.bento-section-third {
  grid-column: span 3;
  grid-row: span 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--container-padding);
  background-color: var(--purple-100);
  font-family: "DM Sans500";
  color: var(--black);

  .title{
    font-weight: bold;
    font-size: 2rem;
  }

  .schedule-post-img{
    width: 16rem;
    height: 16rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .text{
    font-family: "DM Sans400";
    font-size: 1.5rem;
  }

  @media (max-width: 480px){
    order: 4;

    .title{
      font-size: 1.5rem;
    }
    
    .schedule-post-img{
      width: 20rem;
      height: 20rem;
    }
    .text{
      text-align: center;
      font-size: 1.25rem;
      text-wrap-style: pretty;
    }
  } 
}

.bento-section-fourth {
  grid-column: span 3;
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  padding: var(--container-padding);
  background-color: var(--white);
  font-family: "DM Sans500";
  color: var(--black);

  .title{
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-top: 1rem;
  }

  @media (max-width: 480px){
    order: 2;

    .title{
      font-size: 1.5rem;
      line-height: 1.5rem;
    }
    
  } 
}

.bento-section-fifth {
  grid-column: span 3;
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  padding: var(--container-padding);
  background-color: var(--yellow-500);
  font-family: "DM Sans500";
  color: var(--black);

  .title{
    font-size: 2.5rem;
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }

  @media (max-width: 480px){
    order: 3;

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

.bento-section-sixth {
  grid-column: span 3;
  grid-row: span 5;
  display: flex;
  flex-direction: column;
  padding: var(--container-padding);
  background-color: var(--yellow-500);
  font-family: "DM Sans500";
  color: var(--black);

  .title{
    font-size: 2.25rem;
    line-height: 2.25rem;
    text-wrap: pretty;
    margin-bottom: 1rem;
  }

  @media (max-width: 480px){
    order: 8;
  } 
}

.bento-section-seventh {
  grid-column: span 3;
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  padding: var(--container-padding);
  background-color: var(--white);
  font-family: "DM Sans500";
  color: var(--black);

  .title{
    font-size: 4.25rem;
  }

  .text{
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  @media (max-width: 480px){
    order: 6;
    
    .img-style{
      height: 5rem;
      width: 13rem;
    }
    
  } 
}

.bento-section-eighth {
  grid-column: span 6;
  grid-row: span 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--container-padding);
  background-color: var(--purple-500);
  font-family: "DM Sans500";
  color: var(--black);

  .img-width{
    width: 20rem;
    height: 15rem;
  }

  .title{
    color: var(--white);
    font-size: 2.5rem;
    line-height: 2.5rem;
  }

  @media (max-width: 480px){
    order: 5;
    flex-direction: column;

    .title{
      text-align: center;
      margin-top: 1rem;
    }
  } 
}

.attribution {
  color: white;
  margin-top: 1rem; 
  font-size: 14px; 
  text-align: center; 
}
    
.attribution a { 
  color: limegreen; 
}