@media only screen and (max-width: 768px) {
    #grid-container1{
        grid-template-columns: 1fr!important;
        grid-template-rows: auto auto auto auto auto auto auto auto!important;
        grid-template-areas:
        "grid_2"
        "grid_1"
        "grid_3"
        "grid_4"
        "grid_6"
        "grid_5"
        "grid_7"
        "grid_8" !important;
        place-items: center;
    }

    .grid-item{
        width: 90% !important;
        padding-left: 5% !important;
    }

    .grid-item .box{
        width: 100% !important;
        height: fit-content !important;
    }

    .grid-item .pic{
        width: 100% !important;
        height: auto !important;
    }

    .grid-item .text{
        width: 100% !important;
        text-align: center;
    }

    .grid-item .text div{
        width: 90% !important;
        padding: 5% !important;
        text-align: justify;
    }

    .grid-item .text_right{
        width: 100% !important;
        text-align: center;
    }

    .grid-item .text_right div{
        width: 90% !important;
        padding: 5% !important;
        text-align: justify;
    }

    #img{
        height: auto !important;
        width: 100vw;
    }

    .noticeboard{
        position: relative;
        max-height: 80vw;
        transition: 1s;
        overflow-y: hidden;
        text-overflow: ellipsis;
        padding-bottom: 4vw !important;
        cursor: pointer;
    }

    .noticeboard .grey{
        text-overflow: ellipsis;
        overflow-y: hidden;
    }

    .arrow{
        display: block !important;
        position: absolute;
        bottom: 0;
        text-align: center;
        width: 100%;
        margin-left: calc(-1em - 5px - 2vw);
        color: grey;
    }

    #grid-container-new{
        grid-template-columns: 40% 40%;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
        "grid_2 grid_3"
        "grid_6 grid_7"
        "grid_1 grid_4"
        "grid_5 grid_8";
    }
}

.arrow{
    display: none;
}

.center-text{
    text-align: center !important;
}

html{
    background: #f8f4dc;
    overflow-x: hidden;
}

h2{
    padding-top: calc(0.5em + 10px);
    font-size: calc(3vw + 10px);
    text-align: center;
    color: #0B3D2E;
}

#grid-container-new{
    display:grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: auto auto;
    grid-template-areas:
    "grid_2 grid_3 grid_6 grid_7"
    "grid_1 grid_4 grid_5 grid_8";
    place-items: center;
    gap: 0 2em;
    width: 100vw;
    margin-left: 1em;
}

.grid-item{
    width: 90%;
    text-align: center;
    margin: auto;
}

/* #grid-container1{
    display: grid;
    align-items: start;
    width: 100%;
    box-sizing: content-box;
    min-height: 0;
    min-width: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
    "grid_1 grid_2"
    "grid_3 grid_4"
    "grid_5 grid_6"
    "grid_7 grid_8";
    place-items: center left;
} */

#grid_1{
    grid-area: grid_1;
    /* padding-left: calc(8em + 10px); */
}

#grid_2{
    grid-area: grid_2;
    /* padding-left: calc(3em + 10px); */
}

#grid_3{
    grid-area: grid_3;
    /* padding-left: calc(8em + 10px); */
}

#grid_4{
    grid-area: grid_4;
    /* padding-left: calc(3em + 10px); */
}

#grid_5{
    grid-area: grid_5;
    /* padding-left: calc(8em + 10px); */
}

#grid_6{
    grid-area: grid_6;
    /* padding-left: calc(3em + 10px); */
}

#grid_7{
    grid-area: grid_7;
    /* padding-left: calc(8em + 10px); */
}

#grid_8{
    grid-area: grid_8;
    /* padding-left: calc(3em + 10px); */
}

.left{
    --animation: fadeIn 1s ease-in-out 0.5s forwards;
    transform: translate(-50%, 0%);
    opacity:0;
}

.right{
    --animation: fadeIn 1s ease-in-out 0.5s forwards;
    transform: translate(50%, 0%);
    opacity:0;
}

@keyframes fadeIn{
    0% {
        opacity: 0;
    }
    100% {
      opacity: 1;
      transform: translate(0, 0);
    }
}

.text{
    font-size: 1em;
    /* font-size: calc(1.7vw + 10px); */
    /* width: calc(28vw + 10px); */
    /* margin-top: calc(1em + 10px); */
    color: #0B3D2E;
}

.text_right{
    /* font-size: calc(1.7vw + 10px); */
    font-size: 1em;
    /* width: calc(30vw + 10px); */
    /* text-align: right; */
    text-align: center;
    margin-top: calc(1em + 10px);
}

.box{
    /* width: calc(30vw + 10px);
    height: calc(20vw + 10px); */
    width: 100%;
    height: auto;
    background-color: rgb(230, 230, 230);
    margin-top: calc(1em + 10px + 0.25vw);
}

.pic{
    /* width: calc(30vw + 10px);
    height: calc(20vw + 10px); */
    width: 20vw;
    filter: drop-shadow(0px 0px 5px #169766);
}

.smol_left{
    padding-top: calc(0.3em + 10px);
    font-size: calc(1.4vw + 10px);
    width: calc(25vw + 10px);
    color: #169766;
}

.smol_right{
    padding-top: calc(0.3em + 10px);
    font-size: calc(1.5vw + 10px);
    width: calc(30vw + 10px);
    color: #169766;
    text-align: right;
}

#img_div{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#img{
    height: calc(40vw + 10px);
    padding-top: calc(2em + 10px);
    filter: drop-shadow(0px 0px 5px #169766);
}

#grid-container2{
    display: grid;
    width: 75%;
    min-height: 0;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
    "grid_9"
    "grid_10"
}

#grid_9{
    grid-area: grid_9;
}

#grid_10{
    grid-area: grid_10;
}

#title{
    font-weight: bold;
    font-size: calc(3vw + 10px);
}

.grey{
    color: grey;
    display: block;
    font-size: calc(1.2vw + 10px);
    padding-top: 3vw;
    text-align: justify;
}

.noticeboard{
    background-color: rgb(230, 230, 230);
    padding-left: calc(1em + 5px + 2vw);
    padding-right: calc(1em + 5px + 2vw);
    padding-top: calc(2vw);
    padding-bottom: calc(2vw);
    margin-bottom: calc(4vw);
    display: flex;
    flex-direction: column;
}

.title_date{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}