/*#comm-sa {
    width: 100%;
    height: 20rem;
    background-image: url('../../images/comm-banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}*/

#comm-sa {
    margin: 2.4rem 0;
    width: 100%;
    height: auto;
    padding: 1.6rem;
    color: #FFFFFF;
    background-image: linear-gradient(to right, var(--navy), var(--blue-grey));
}

#comm-cta {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-gap: 1.6rem;
    color: #FFFFFF;
    align-items: center;
}

#comm-resources {
    background: var(--off-white);
    padding-bottom: 6rem;
    margin-top: 3.6rem;
}

#comm-header a div h4 {
    color: #21343D;
}

#comm-header a div p {
    color: var(--grey);
}

#comm-header a div:hover h4 {
    color: #FFFFFF;
}

#comm-header a div:hover p {
    color: #FFFFFF;
}

.comm-card:hover {
    background: #009FE3;
    color: #FFFFFF !important;
    border: 1px solid #009FE3;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
}

/*Resources*/
.card-image {
    min-height: 16rem;
    height: 100%;
    object-fit: cover;
}

.image-banner {
    background: #25495C;
    bottom: .01rem;
    position: absolute;
    width: 100%;
    color: #FFFFFF;
    padding: .6rem 1.6rem;
}

.card-info-rl {
    padding: 1.6rem;
    align-content: center;
    display: flex;
    flex-direction: column;
    height: 24rem;
}

/*#vidContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    margin-top: 20px;
    margin-bottom: 32px;
}*/

#vidPlayer {
    /*height: 352px;*/
}

/*.vid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vidBkgd {
    border-radius: 4px;
}

#vidImage {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}*/

.membership_icon {
    width: 8rem;
    height: auto;
    margin: 1.6rem 0px 0px 0px;
}

a .SACard h4, a .SACard h4:hover {
    color: #21343D;
}

a .SACard .image-banner h6, a .SACard .image-banner h6:hover {
    color: #FFFFFF;
}

a .SACard h6, a .SACard h6:hover {
    color: #5b7380;
}

a .SACard p, a .SACard p:hover {
    color: #374C57;
}

a .SACard:hover {
    color: #009fda;
}

#comm-offerings .sa-grid-2 {
    place-items: top;
    margin: 3.6rem 0;
}

.grid-img {
    border-radius: 4px;
}

#comm-offerings a, #comm-offerings h3 {
    font-weight: 600;
}

.comm-video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.comm-responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (max-width: 1005px) {
    .hero-div h1 span {
        display: grid !important;
    }
}

@media only screen and (max-width: 600px) {
    .sa-grid-2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: "image" "text";
    }

    .sa-grid-2-img {
        grid-area: image;
    }

    .sa-grid-2-text {
        grid-area: text;
    }

    #comm-cta {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
}