.course__content{
  display: grid;
  grid-template-areas:
  "forum members"
  "forum calendar"
    "forum todo";
  gap: var(--space-m);
}
.calendar{
  grid-area: calendar;
}
.courses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
}
.course__field{
    display: flex;
    flex-direction: row;
    gap: var(--space-m);
    align-items: center;
    background-color: #FFFFFF;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    width:fit-content;
    padding-left:0rem;
    padding-inline: 4rem;
    padding-block: 2rem;
    margin-bottom: var(--space-m);
    .form{
      margin:0rem;
      padding: 0rem;
    }
}
.course-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 325px;
}
.mobile-forum__btn{
  display: none;
}
.course-card__top {
    aspect-ratio: 4 / 3;
}
.course-card__img { width: 100%; height: 100%; object-fit: cover; }

.course-card__bottom {
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.course-card__btn { margin-top: var(--space-s); align-self: flex-start; }
.course-card__title { 
  font-size: var(--font-size-h3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.course-card__meta { font-size: var(--font-size-ul); }
.course-card__meta--muted {
     color: var(--color-text-muted); 
     font-size: var(--font-size-p);
}

.forum{
    grid-area: forum;
    display: flex;
    flex-direction: column;
    max-width: 45rem;
    width:45rem;
}
.members{
    grid-area: members;
    width:20rem;
}
.todo{
    grid-area: todo
}
.members__submenu{
  gap: 5rem;
  padding: var(--space-m);
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  position: fixed;
  top: var(--space-s);
  right:-40rem;
  transition: 0.7s ease-in-out;
  z-index: 2;
  &.is-open{
    right:0rem;
  }
}
.member__field{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-block: 4rem;
  gap: 6rem;
  width: max-content;
}
.member__card{
    min-height:5rem;
    width: 30rem;
    padding: 0.5rem;
    display: grid;
    grid-template-areas:
    'avatar user user button'
    'avatar user user button';
    margin-bottom: var(--space-m);
    align-items: center;
}
.members__preview{
    display: flex;
    flex-direction: row;
    p{
      align-self: center;
    }

}
.member__avatar-img{
    grid-area: avatar;
    width:3.125rem;
    height:3.125rem;
    border-radius: 999px;
    justify-self: center;
    align-self: center;
}
.member__username{
    grid-area: user;
    justify-self: self-start;
    align-self: self-start;
    font-size: var(--font-size-h5);
}
.member__mail{
    grid-area: user;
    align-self: self-end;
    justify-self: self-start;
}
.member__space{
    grid-area: button;
    justify-self: self-start;
    align-self: center;
    font-size: var(--font-size-h5);
    width: 11rem;
    padding-inline: 1rem;
}
.btn-member{
  grid-area: button;
  align-self: center;
  justify-self: center;
  margin: 0.5rem;
}
.calendar-card{
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-m);
  width: 35rem;
}

.calendar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: var(--space-s);
}

.calendar-month{
  font-size: var(--font-size-h5);
  font-weight: 500;
}

.calendar-nav{
  text-decoration:none;
  padding: .25rem .6rem;
  border-radius: 999px;
  color: var(--color-primary);
}

.calendar-weekdays{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
  margin-bottom: .25rem;
  font-size: .75rem;
  color: var(--color-text-muted);
  text-align:center;
}

.calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem;
}

.calendar-day {
  position: relative;
  padding: 10px 8px;
  min-height: 70px;
}

.calendar-event {
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  background: var(--color-surface);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-more {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.calendar-day.is-outside{
  opacity: .35;
}

.calendar-date{
  font-size: .8rem;
}

.calendar-day.has-event{
  outline: 2px solid rgba(255, 100, 60, .25);
}

.calendar-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-primary);
  position:absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

.calendar-list{
  margin-top: var(--space-m);
  font-size: var(--font-size-p);
}
.calendar-list-day{
  margin-bottom: var(--space-s);
}
.calendar-list-day ul{
  margin: .25rem 0 0 1rem;
}
@media (max-width: 1200px){
  .course__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-m);
}
.mobile-forum__btn{
  display: block;
  position: fixed;
  right: var(--space-m);
  bottom: var(--space-m);
  z-index:4;
}
.forum{
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index:3;
  padding: var(--space-m);
  transition: 0.7s ease-in-out;
  position:fixed;
  overflow:scroll;
  width:30rem;
  top:0rem;
  right: -40rem;
  &.is-open{
    position: relative;
    right:0rem
  }
}
}