
.base-content{
  padding-block: 1rem;
  padding-inline: 1.5rem;
  background-color: white;
  border-radius: 0.8rem;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.dark .base-content{
  padding-block: 1rem;
  padding-inline: 1.5rem;
  background-color: #252525;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 0.8rem;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.header-base-content{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  height: 5rem;
  position: relative;
  
}

.header-base-content > span{
  width: 3rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-base-content{
  color: black;
}

.header-base-content > span > i{
  font-size: 1.7rem;
}

.header-base-content > div{
  width: 100%;
  display: flex;
  justify-content: center;
}

.justify-center{
  justify-content: center;
}
.justify-left{
  justify-content: left;
}
.justify-right{
  justify-content: right;
}

.header-base-content > div > h2{
  width: 100%;
  display: flex;
  align-items: center;
  color: black;
}

.line-title-content{
  display: flex;
  width: 17rem;
  flex-direction: column;
  justify-content: center;
}

.header-base-content > div .small{
  font-size: 1.4rem;
}
.header-base-content > div .medium{
  font-size: 1.7rem;
}
.header-base-content > div .large{
  font-size: 2rem;
}



@media only screen and (max-width: 767px) {
  .base-content{
    padding-inline: 0.5rem;
  }

  .header-base-content{
    align-items: center;
  }

  .header-base-content > div > h2{
    padding-bottom: 0rem;
  }
}

@media only screen and (min-width: 170px) and (max-width: 319px) {
  .base-content{
    padding-inline: 0.5rem;
  }

  .header-base-content{
    align-items: center;
    padding: 0.5rem;
  }

  .header-base-content > div > h2{
    padding-bottom: 0rem;
  }
}
