div.team-listing                           { max-width: 1600px; margin: 0 auto; }
div.team-listing ul.team-item               { list-style: none !important;}
ul.team-item li                              { display: inline-block; max-width: 350px; width: 22%; height: 100%; margin-right: 2%; color: #20201E; }
.team-item li:hover                        { text-decoration: none; }
.team-item li:nth-of-type(4n)              { margin-right: 0%; }
.team-item li img                          { height: 400px; width: 100%; }
.team-item li p                            { height: 100px; }
.team-item li .team-name                   { display: block; font-size: 1.5rem; font-weight: 500; margin-top: 1rem; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-y: hidden; }
.team-item li .team-name > .icon           { font-size: 1rem; padding-left: 0.75rem; }
.team-item li .team-title                  { display: block; font-size: 1.125rem; font-weight: 400; margin-top: 0.375rem; height: 30px; }
.team-item li .image-container             { position: relative; line-height: 0; overflow: hidden; }
.team-item li .overlay                     { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.2); display: flex; align-items: flex-end; justify-content: center; transform: translateY(100%); transition: transform 0.3s ease-in-out; }
.team-item li .overlay .wrapper            { padding-bottom: 5rem; }
.team-item li .overlay .wrapper .icon      { font-size: 4.5rem; color: #fff; }
.team-item li .team-item li-content           { height: 100px; }



@media only screen and (min-width: 0px) and (max-width: 800px)
{
    .team-item li                            { max-width: 350px; width: 48%; margin-right: 3%;  }
    .team-item li:nth-of-type(3n)            { margin-right: 3%; }
    .team-item li:nth-of-type(2n)            { margin-right: 0%; }

    .team-modal                           { height: 400px; overflow: hidden; }
    .team-modal-image-container           { width: 40%; }
    .team-modal-content                   { padding: 2rem; width: 60%; overflow-y: scroll; }

    section.main div.content .image-container img:not(.image_dimensions img) { margin: 0 !important; }
    section.main div.content .team-modal-image-container img:not(.image_dimensions img) { line-height: 0; }
}

@media only screen and (min-width: 0px) and (max-width: 600px)
{
    .team-listing                         { text-align: center; }
    .team-item li                            { width: 100%; margin-right: 0%;  }
    .team-item li:nth-of-type(3n)            { margin-right: 0%; }

    .team-modal                           { flex-direction: column; padding: 2rem; height: 100%; }
    .team-modal-image-container           { width: 100%; text-align: center; }
    .team-modal-image                     { width: 300px; height: auto; object-fit: contain; margin: 0 auto; }
    .team-modal-content                   { padding: 0; padding-top: 1rem; width: 100%; height: 100%; position: static; }
}