.resources-container {
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    color: var(--color);
    padding: 24px;

}

.resources-container.theme-light {
    --background: var(--white-sand);
    --eyebrow: var(--light-dusk);
    --color: var(--night-sky);
    --headline: var(--azamara-blue);
    --button-color:  var(--azamara-blue);
    --button-border: var(--azamara-blue);
    --button-background: transparent;
}

.resources-container.theme-dark {
    --background: var(--azamara-blue);
    --color: var(--pure-white);
    --eyebrow: var(--light-dusk);
    --headline: var(--pure-white);
    --button-color:  var(--azamara-blue);
    --button-border: var(--pure-white);
    --button-background: var(--pure-white);
}

.resources-container.theme-dark .under-card-body a{
    color: var(--color);
}

.resources-container.theme-dark .under-card-body a:hover {
    color: var(--aqua);
}

.resources-container.theme-dark .resources-header .eyebrow {
    color: var(--eyebrow);
}

.resources-container .resources-header {
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-bottom: 36px;
}

.resources-container .resources-header .headline {
    color: var(--headline);
    font-size: 48px;
    line-height: 59px;
    text-align: center;
}

.resources-container .resources-header .eyebrow {
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--night-sky);
}

.resources-container .resources-grid {
  /*  display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
    justify-content: center;
}

.resources-container .row > div{
    margin-bottom: 24px;
}


.resources-container .button-container {
    margin-top: 2rem;
}


.resources-container .modal .modal-dialog .modal-content .modal-body.video, .resources-container .modal .modal-dialog .modal-content .modal-body.video video {
    padding: 0;
    margin-bottom: 0;
}

.resources-container .modal .modal-dialog .modal-content .modal-body.youtube {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
}

.resources-container .modal .modal-dialog .modal-content .modal-body.youtube iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

.resources-container .under-card-body  {

}



/* -sm breakpoint */
@media (min-width: 576px) {

}

/* -md breakpoint */
@media (min-width: 768px) {
    .resources-container {
        padding: 72px;
    }
}

/* -lg breakpoint*/
@media (min-width: 992px) {

    .resources-container .row > div{
        margin-bottom: 24px;
    }

}

/* -xl breakpoint */
@media (min-width: 1200px) {

}