.portholes-container {
    padding: 48px 24px;
    background-color: var(--background);
    color: var(--color);
}

.portholes-container.theme-light {
    --background: var(--pure-white);
    --color: var(--night-sky);
    --headline: var(--azamara-blue);
}

.portholes-container.theme-dark {
    --background: var(--azamara-blue);
    --color: var(--pure-white);
    --headline: var(--pure-white);
}

.portholes-headline {
    text-align: center;
    letter-spacing: 0.025em;
    color: var(--headline);
    font-size: 36px;
    line-height: 44px;
}



/*Portholes Layout*/


.layout-portholes .img-porthole {
    border-top-left-radius: 50% 50%;
    border-top-right-radius: 50% 50%;
    border-bottom-right-radius: 50% 50%;
    border-bottom-left-radius: 50% 50%;
    margin: 24px;
}

.layout-portholes .img-porthole.ph-size-3 {
    height: 240px;
    width: 240px;
}

.layout-portholes .img-porthole.ph-size-4 {
    height: 120px;
    width: 120px;
}

/*Images Layout*/

.layout-images .img-porthole.ph-size-3 {
    height: 160px;
    width: 160px;
}

.layout-images .img-porthole.ph-size-4 {
    height: 140px;
    width: 140px;
}

.layout-images .img-porthole.ph-size-6 {
    height: 160px;
    width: 160px;
}

.layout-images .img-porthole {
    margin: 24px;
}


.porthole-container {
    text-align: center;
    align-content: center;
    align-items: start !important;
    justify-content: center;
    --bs-gutter-x: 48px;
}

.layout-images .porthole-year {
    color: var(--dusk) !important;
    margin-bottom: 8px;
}

.porthole-headline {
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    letter-spacing: 0.025em;
    color: var(--headline);
    align-self: flex-start;
    margin-bottom: 24px;
}

.portholes-container p.blurb {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0.05em;
    align-self: flex-start;
}

.layout-images p.blurb {
    color: var(--dusk);
}


/* -sm breakpoint */
@media (min-width: 576px) {
    .portholes-container .row {
        align-items: center;
    }
}

/* -md breakpoint */
@media (min-width: 768px) {


}

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

}

/* -xl breakpoint */
@media (min-width: 1200px) {
    .portholes-headline {
        font-size: 48px;
        line-height: 60px;
    }

    .porthole-headline {
        font-size: 30px;
        line-height: 38px;
    }

}