#our-story {    color: #ffffff;    text-align: center;    margin: 10rem auto;    min-height: ;}#history, #team {    width: 70%;    margin: 0 auto;}#history p.title, #team p.title {    position: relative;    display: inline-block;    margin: 2rem 9.6rem;    font-size: 2.4rem;}#history p.title:before, #history p.title:after, #team p.title:before, #team p.title:after {    content: "";    position: absolute;    border-bottom: 1px solid rgba(255,255,255,0.5);    top: 1.3rem;    width: 18rem;}#history p.title:before, #team p.title:before {    right: 100%;    margin-right: 1.5rem;}#history p.title:after, #team p.title:after {    left: 100%;    margin-left: 1.5rem;}#history p.paragraph {    /*color: rgba(255,255,255,0.8);*/    line-height: 2.1rem;    font-size: 1.4rem;    margin-bottom: 4.8rem;    font-weight: 100;}.cards {    /* display: flex;    justify-content: space-between;    flex-wrap: wrap; */    display: grid;    grid-column-gap: 1%;    grid-row-gap: 1.1rem;    grid-auto-flow: row dense;    transition: all 0.4s ease-in-out;}.card-intro {    /* min-height: 23rem; */    text-align: center;    border-radius: 6px;    background-color: rgba(82, 69, 165, 0.2);    box-shadow: 10px 10px 10px rgba(21, 16, 45, 0.15);    -webkit-box-shadow: 10px 10px 10px rgba(21, 16, 45, 0.15);    -moz-box-shadow: 10px 10px 10px rgba(21, 16, 45, 0.15);    padding: 2rem 0;    min-height: 6.4rem;    transition: all 0.8s ease-in-out;    overflow: hidden;}.card-name {    /* padding: 1rem 0; */    padding: 2.7rem 0 0 0;    font-size: 1.6rem;    transition: padding 0.3s ease-in;}.card-position {    padding: 0;    font-size: 1.3rem;    color: rgba(255, 255, 255, 0.7);    opacity: 0;    visibility: hidden;    transition: all 0.3s ease-in;}.card-intro:hover > .card-name , .card-name.active {    padding: 1.8rem 0;    transition: padding 0.2s ease-out;}.card-intro:hover > .card-position, .card-position.active {    visibility: visible;    opacity: 1;    padding: 0.3rem 0 2.4rem 0;    transition: all 0.2s ease-out;}.card-intro ul {    list-style-type: none;    text-align: left;    line-height: 2.1rem;    font-size: 1.2rem;    padding: 0 2.4rem 5% 5.6rem;    opacity: 0;    display: none;    transition: all 0.3s ease-in-out;}.card-intro.active ul {    opacity: 1;    display: block;    transition: all 0.3s ease-in-out;}.card-intro ul li {    margin: 0.6rem 0;    font-weight: 100;}@media only screen and (min-width: 1281px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 70%;        max-width: 200rem;        margin: 0 auto;    }    .cards {        grid-template-columns: repeat(4, calc(100% / 4 - 1% + 1%/4));        /*grid-template-rows: 33% 33% 33%;*/    }    .card-intro {        /* width: calc(25% - 10px); */        /* margin: 7px; */    }}@media only screen and (min-width: 992px) and (max-width: 1280px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 80%;        margin: 0 auto;    }    .cards {        grid-template-columns: repeat(3, calc(100% / 3 - 1% + 1% / 3));        /* grid-auto-flow: row; */    }    .card-intro:hover {        background-color: rgba(82, 69, 165, 0.5);        transition: all 0.3s;    }}@media only screen and (min-width: 768px) and (max-width: 991px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 90%;        margin: 0 auto;    }    .cards {        grid-template-columns: repeat(2, calc(100% / 2 - 1% + 1%/2));        /*grid-template-rows: repeat(10, auto);*/    }}@media only screen and (min-width: 415px) and (max-width: 767px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 80%;        margin: 0 auto;    }    #our-story {        width: 85%;        margin-top: 10rem;    }    #history p.title {        margin: 3.2rem 1.6rem;    }    #history p.title, #team p.title {        font-size: 2.1rem;    }    #history p.title:before,    #history p.title:after,    #team p.title:before,    #team p.title:after {        top: 1rem;        width: 12rem;    }    .cards {        grid-column-gap: 2%;        grid-template-columns: repeat(2, calc(100% / 2 - 2% + 2%/2));    }    .card-intro {        padding: 1rem 0;    }    .card-intro ul {        padding: 0 2rem 5% 4rem;    }}@media only screen and (max-width: 414px) {    .navbar, .main-div, .dropdown-div, .footer {        width: 80%;        margin: 0 auto;    }    #history p.title, #team p.title {        font-size: 1.8rem;        margin: 2rem;    }    #history p.title:before,    #history p.title:after,    #team p.title:before,    #team p.title:after {        top: 0.8rem;        width: 5rem;    }    #history p.paragraph {        font-size: 1.2rem;        line-height: 1.8rem;    }    .cards {        grid-template-columns: 100%;        /*grid-template-rows: repeat(20, 100%);*/    }    .card-intro {        padding: 0.5rem;        margin-bottom: 1rem;    }    .card-intro ul {        line-height: 1.6rem;        padding: 0 3rem 2rem;    }    .card-name {        font-size: 1.4rem;    }    .card-position {        font-size: 1.2rem;    }}#gridacord-container {    display: flex;    width: 100%;    height: 100%;    margin: 0 auto;    flex-direction: column;    overflow: hidden;  }  .line {    display: flex;    width: 100%;    overflow: hidden;    outline: 5px solid #fafafa;    z-index: 5;  }  .line .item {    height: 100%;    overflow: hidden;    outline: 5px solid #fafafa;    z-index: 5;  }