.section_group {
  width: 80%;
  margin: auto;

  & .community_title {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    border-bottom: 0.3rem dashed darkblue;
    text-transform: uppercase;
  }

  & .container {


    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    padding: 1rem;

    & .Addgroups {
      max-height: 90vh;
      overflow-y: auto;

      & h3 {
        text-align: center;
        color: white;
        font-size: 1.8rem;
        padding: 1rem;
      }

      overflow: auto;
      display: none;
      position: fixed;
      top: 50%;
      background-color: blueviolet;
      color: white;
      width: 80%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 1rem;
      border-radius: 1rem;

      & form {
        background-color: white;
        color: black;
        border-radius: 1rem;
        padding: 1rem;

        & label {
          font-size: 1.2rem;
          background-color: rgb(206, 170, 240);
          display: block;
        }

        & input,
        textarea {
          padding: 0.2rem;
        }

      }

    }

    & .viewgroups {
      max-height: 90%;
      overflow-y: scroll;
      scrollbar-width: none;

      & #grouplist {
        display: grid;
        grid-template-columns: 1fr 4fr 1fr;
        gap: 1rem;
        background-color: antiquewhite;
        color: rgb(0, 0, 0);

        & .column {
          font-size: 1.4rem;
          font-weight: 900;
          padding: 0.2rem;
        }
      }

      & ::-webkit-scrollbar {
        display: none;
      }

    }


    & .group {
      border: 0.1rem solid black;
      margin: 1rem;
      flex: none;
      transition: all 0.3s ease-in-out;
      padding: 0.5rem;

      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

      &:hover {

        box-shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;

        & p {
          color: #00008b;
        }
      }

      & img {
        width: 100%;
        aspect-ratio: 1;
        background: var(--bg_color_main);
        border-radius: 5%;
        transition: all 0.3s ease-in-out;
      }

      & p {
        font-size: 1.2rem;
        margin-top: 0.1rem;
        /* text-align: center; */
      }
    }
  }
}


@media screen and (max-width: 768px) {
  .section_group {
    width: 95%;

    & .community_title {
      font-size: 1.5rem;
    }

    & .container {
      gap: 1rem;
      padding: 0.5rem;

      & .Addgroups {
        width: 95%;
        padding: 0.5rem;

        & form {
          padding: 0.5rem;

          & label {
            font-size: 1rem;
          }

          & input,
          textarea {
            width: 100%;
          }
        }
      }

      & .viewgroups {
        & #grouplist {
          grid-template-columns: 1fr;
          gap: 0.5rem;

          & .column {
            font-size: 1rem;
          }
        }
      }

      & .group {
        margin: 0.5rem;

        & p {
          font-size: 1rem;
        }
      }
    }
  }
}