.resources-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: .5em;
    width: 100%;
    height: 100%;
    margin-top:4rem;
}
.resources-grid img {
    transition:all .5s ease;
}
.resources-grid img:hover {
    filter: brightness(1.2);
}
.athletics {
    grid-area: 1 / 1 / 3 / 2;
    background-image:url('/community/_assets-index/images/tile-section-slate02.svg');
    background-repeat:no-repeat;
    background-position:bottom left;
}

.theatre {
    grid-area: 1 / 3 / 3 / 4;
    text-align: right;
    background-image:url('/community/_assets-index/images/tile-section-slate.svg');
    background-repeat:no-repeat;
    background-position:bottom right;
}

.music {
    grid-area: 2 / 2 / 3 / 3;
}
.music-title {
    grid-area: 2 / 3 / 3 / 4;
    align-self: center;
}
.title-tag {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
    text-align: center;
}
.title-tag h2 {
    margin-top: -2rem;
    margin-bottom: 0;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1;
    position: relative;
}
.title-tag h2::after {
    content:url(/community/_assets-index/'');
    width: 90%;
    height: 90%;
    display: block;
    position: absolute;
    top: 3rem;
    left: 2rem;
}
    
.resources-grid .athletics p, .resources-grid .theatre p, .resources-grid .music-title p {
    text-transform: uppercase;
    letter-spacing:.1rem;
    font-weight:600;
    position: relative;
    font-size: 1.25rem;
}
.resources-grid .athletics p {
    margin-top: 2rem;
}
.resources-grid .athletics p::before {
    content: "";
    width: 2px;
    height: 3rem;
    background-color: var(--gfColors-gold);
    display: block;
    position: absolute;
    top: -3.5rem;
    left: 2rem;
}
.resources-grid .athletics p::after {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--gfColors-gold);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -10px;
    left: 34.45px;
}
.resources-grid .theatre p {
    margin-top: 2rem;
}
.resources-grid .theatre p::before {
    content: "";
    width: 2px;
    height: 3rem;
    background-color: var(--gfColors-gold);
    display: block;
    position: absolute;
    top: -3.5rem;
    right: 1.75rem;
}
.resources-grid .theatre p::after {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--gfColors-gold);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -10px;
    right: 1.6rem;
}
.resources-grid .music-title p {
    margin-left: 1.75rem;
    margin-bottom: 0;
    padding-bottom: .5rem;
}
.resources-grid .music-title p::before {
    content: "";
    width: 3rem;
    height: 2px;
    background-color: var(--gfColors-gold);
    display: block;
    position: absolute;
    left: -3.75rem;
    bottom: 1.35rem;
}
.resources-grid .music-title p::after {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--gfColors-gold);
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 1.25rem;
    left: -.75rem;
}
.circle-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='300' fill='%23f3f5f8'%3E%3C/circle%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: min(25vw, 35%);
    background-position-x: 50%;
    background-position-y: top;
}

#calendar-link.button {
    padding: 1rem 2rem;
    margin-top: 5rem;
    line-height: 2;
}


@media (min-width:992px) {
    .resources-grid {
        margin-top:7rem;
    }
}
@media (max-width:767.98px) {
    .resources-grid {
        display: grid;
        justify-items: center;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto;
        grid-auto-columns: 1fr;
        gap: .5em;
        grid-auto-flow: row;
        grid-template-areas: none;
        width: 100%;
        height: 100%;
        margin-top: 2rem;
    }
    .title-tag {
        grid-area: 1 / 1 / 2 / 2;
        text-align: left;
        padding: 1rem 0;
    }
    .title-tag h2 {
        font-size:3rem;
        margin-left: 1rem;
        margin-top: 0;
    }
    .title-tag h2::after {
        display:none;
    }
    .athletics {
        grid-area: 2/1/4/2;
    }
    .theatre {
        grid-area: 4/1/6/2;
        align-items: end;
        text-align: left;
        background-image:none;
    }
    .resources-grid .theatre p {
        margin-right: 0;
        padding-top: 0;
        margin-top: 2rem;
    }
    .resources-grid .theatre p::before {
        width: 2px;
        height: 3rem;
        left: 2rem;
        top: -3.5rem;
    }
    .music {
        grid-area: 6/1/7/2;
    }
    .music-title {
        grid-area: 7/1/8/2;
        justify-self: start;
    }
    .resources-grid .music-title p {
        margin-left: 2.5rem;
    }
    .resources-grid .music-title p::before {
        width: 2px;
        height: 3rem;
        left: 1rem;
        top: -3.5rem;
    }
    .resources-grid .theatre p::after {
        top: -.5rem;
        left: 1.9rem;
    }
    .resources-grid .music-title p::after {
        top: -.5rem;
        left: .9rem;
    }
    #calendar-link.button {
        width: 100%;
        margin: 2rem 0;
    }
    #calendar-link.button::before {
        display:none;
    }
}
@media (max-width:575.98px) {
    .circle-bg, main {
        background-image:none;
    }
    
    #clinics.u-grid--largeGap {
        gap: 0 !important;
    }
}
@media (max-width:375.98px) {
    .resources-grid .music-title p {
        margin-left: 1rem;
    }
}
.pic-link {	
	position:relative;
    justify-self: center;
    overflow:hidden;
}

#clinics .circle-image {
    position:relative;
    justify-self: center;
    overflow:hidden;
    border-radius: 50%;
    margin-bottom: 1rem;
    margin-top: 2rem;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
/*
#clinics .circle-image:hover, #clinics .circle-image img, #clinics .circle-image img:hover, #clinics .circle-image::before, #clinics .circle-image::before: hover {
    overflow:hidden;
    border-radius: 50%;
}
*/
#clinics .circle-image img, .pic-link img {
    width:100%;
    height:100%;
    transition: all .5s;
}
#clinics .circle-image:hover img, .pic-link:hover img {
  transform: scale(1.1);
  overflow:hidden;
}
#clinics .circle-image::before {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    background-color: #0a376f;
    opacity: 0.5;
    border-radius: 50%;
    z-index: 10;
}
#clinics .circle-image::before: hover, .pic-link::before: hover {
    opacity:.5;
}
#clinics .circle-image h3, .pic-link h3 {
    color: white;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
    font-family: var(--gfVars-bodyFont);
    position: absolute;
    top: 0;
    left: 0px;
    z-index: 20;
}
#clinics .circle-image h3 a, .pic-link h3 a {
    position: relative;
    color: var(--gfColors-slate15);
    display: block;
    box-shadow: none;
    line-height: 1.2;
    border-bottom: 1px solid var(--gfColors-slate15);
    margin-right: 2rem;
    margin-left: 2rem;
}
#clinics .circle-image h3 a:hover, .pic-link h3 a:hover {
    border-bottom: 1px solid var(--gfColors-gold);
}
main a.block-link {
    color: #103d81;
    display: inline;
}
main a.block-link:hover {
    color: #0f3062;
    box-shadow: inset 0px -1px 0px #cfd8e2;
}

@media (min-width:992px) {
    #clinics .circle-image {
        margin-bottom:4rem;
    }
}

@media (max-width:767.98px) {
    .pic-link h3 a {
        font-size:1.5rem;
    }
    .pic-link::before {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        background-color: #0a376f;
        opacity: 0.5;
        z-index: 10;
    }
    #clinics .circle-image h3 a {
        font-size: 1.5rem;
    }
}
/* Asterisk */
.u-asterisk::after {
    left:11rem;
}
@media (max-width:1199.98px) {
    .u-asterisk::after {
        left:6rem;
    }
}
@media (max-width:991.98px) {
    .u-asterisk::after {
        left:-0.5rem;
    }
}
@media (max-width:767.98px) {
    .u-asterisk::after {
        left:5.5rem;
    }
}
@media (max-width:576.98px){
    .u-asterisk::after {
        display: none;
    }
}