/* @group Midtown Lifestyle
------------------------------------ */

[data-component="midtown-lifestyle"] { background-color: var(--limestone); }

/* @group Header
------------------------------------ */
.lifestyle-header { padding: 4rem 0 0; background-color: var(--spanish-moss); }
.lifestyle-header h2 { font-family: var(--brolimo-font); font-weight: 400; text-transform: uppercase; font-size: 6.6em; line-height: 1em; font-variant-ligatures: discretionary-ligatures; color: var(--bath-salts); margin: 0 0 6rem; }
@media only screen
and (min-width : 961px) {
    .lifestyle-header { padding: 6.5rem 0 0; }
    .lifestyle-header h2 { font-size: 15em; line-height: 1em; margin: 0 0 4rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Header
------------------------------------ */


/* ----- */


/* @group Image and text
------------------------------------ */
.lifestyle-txt-img { position: relative; padding-bottom: 13.5rem; background-color: var(--spanish-moss); }
.lifestyle-txt-img .text { color: var(--limestone); margin-bottom: 8rem; }
.lifestyle-txt-img .text h3 { font: var(--subheader-mobile); letter-spacing: var(--subheader-mobile-letterspacing); margin: 0 0 3rem; }
.lifestyle-txt-img .image-container { padding-left: var(--general-padding-mobile); }
.lifestyle-txt-img .image-container figure { height: 50rem; }
@media only screen
and (min-width : 961px) {
    .lifestyle-txt-img { position: relative; padding-bottom: 8rem; min-height: 68.2rem; }
    .lifestyle-txt-img .image-container { position: absolute; top: 0; right: 0; width: 50%; height: 60.2rem; padding-left: 0; }
    .lifestyle-txt-img .image-container figure { width: 100%; height: 60.2rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}
/* @end Image and text
------------------------------------ */


/* ----- */


/* @group Banner
------------------------------------ */
.lifestyle-banner { padding-bottom: 34.8rem; background-color: var(--spanish-moss); } 

.lifestyle-banner .image { position: relative; }
.lifestyle-banner .image::after { content: ''; width: 98%; position: absolute; pointer-events: none; top: 0; bottom: -3rem; left: 0; background: url('../../img/layout/textures/sandstone.jpeg') no-repeat; background-size: cover; }
.lifestyle-banner .image figure { width: 100%; height: 33rem; z-index: 2; }


.lifestyle-banner .text figure { z-index: 3; }
.lifestyle-banner .text .txt-box { padding-top: 24.8rem; color: var(--limestone); }
.lifestyle-banner .text .txt-box h3 { font: var(--subheader-mobile); letter-spacing: var(--subheader-mobile-letterspacing); margin: 0 0 3rem; }
@media only screen
and (min-width : 961px) {

    .lifestyle-banner { padding-bottom: 24rem; }

    .lifestyle-banner .image figure { height: 49.4rem; }

    .lifestyle-banner .text figure { height: 34.4rem; top: -7.6rem; }
    .lifestyle-banner .text .txt-box { padding-top: 11rem; }
    .lifestyle-banner .text .txt-box h3 { font: var(--subheader); letter-spacing: var(--subheader-letterspacing); }

}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .lifestyle-banner .text { position: relative; }
    .lifestyle-banner .text figure { position: absolute; width: 20.4rem; height: 25rem; padding: 0; top: -11.2rem; }
    .lifestyle-banner .text .txt-box { padding-left: 9.4rem; }
}
/* @end Banner
------------------------------------ */


/* ----- */


/* @group Images Layout
------------------------------------ */
.lifestyle-images { padding: 0 0 11.1rem; }

.lifestyle-images .row { position: relative; }
.lifestyle-images .row::before,
.lifestyle-images .row::after { content: ''; position: absolute; top: 0; bottom: -3.1rem; pointer-events: none; }
.lifestyle-images .row::before { background: url('../../img/layout/textures/limestone.jpeg') no-repeat; background-size: cover; width: 100vw; right: calc(50% - 2rem); z-index: 1; }
.lifestyle-images .row::after { content: ''; background: url('../../img/layout/textures/wood1.jpeg') no-repeat; background-size: cover; width: 50%; right: 0; z-index: 2; }

.lifestyle-images figure { padding: 0; width: 100%; }
.lifestyle-images figure.col-36-6 { height: 23.5rem; width: 20.7rem; position: absolute; right: 0; top: -16.8rem; z-index: 4; }
.lifestyle-images figure.col-36-27 { height: 33rem; z-index: 3; }
@media only screen
and (min-width : 961px) {
    .lifestyle-images { padding: 0; }

    .lifestyle-images .row::before,
    .lifestyle-images .row::after { top: -14rem; bottom: 10rem; }
    .lifestyle-images .row::after { right: calc(13.89% - 3rem); }

    .lifestyle-images figure.col-36-6 { right: 9rem; top: -23.5rem; }
    .lifestyle-images figure.col-36-27 { top: -14rem; height: 42.9rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .lifestyle-images figure.col-36-27 { padding-right: var(--general-padding-mobile); }
}
/* @end Images Layout
------------------------------------ */


/* ----- */


/* @group Headline Section
------------------------------------ */

.lifestyle-headline .text { margin-bottom: 8rem; }
.lifestyle-headline .text h2 { color: var(--forest); text-transform: uppercase; font-family: var(--brolimo-font); font-variant-ligatures: discretionary-ligatures; font-size: 5.4em; line-height: 1em; margin: 0 0 6rem; }
.lifestyle-headline .text p { color: var(--spanish-moss); }

.lifestyle-headline .images { position: relative; }

.lifestyle-headline .images aside { height: 16.3rem; }
.lifestyle-headline .images aside:first-of-type { width: 18.8rem; }
.lifestyle-headline .images aside:last-of-type { width: 22.5rem; }

.lifestyle-headline .images figure { width: 100%; height: 25rem; }
@media only screen
and (min-width : 961px) {
    .lifestyle-headline .text h2 { font-size: 7.5em; line-height: 1em; margin: 0 0 4rem; }
    
    .lifestyle-headline .images figure { margin-top: 15rem; margin-bottom: 20rem; height: 33.4rem; }
    .lifestyle-headline .images aside { position: absolute; }
    .lifestyle-headline .images aside:first-of-type { top: 8rem; left: 75%; }
    .lifestyle-headline .images aside:last-of-type { bottom: -2rem; left: 63.89%; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .lifestyle-headline .images figure { padding-left: 0; margin: 0 0 8rem; }
    .lifestyle-headline .images aside:first-of-type { margin: 0 0 8rem auto; }
    .lifestyle-headline .images aside:last-of-type { margin: 0 var(--general-padding-mobile) 14rem auto; }
}
/* @end Headline Section
------------------------------------ */


/* ----- */


/* @group Events Section
------------------------------------ */

.lifestyle-events .header { padding-bottom: 6rem; }
.lifestyle-events .header h2 { color: var(--forest); text-transform: uppercase; font-family: var(--brolimo-font); font-variant-ligatures: discretionary-ligatures; font-size: 5.4em; line-height: 1em; margin: 0 0 6rem; }
.lifestyle-events .header .txt-box { color: var(--spanish-moss); }
.lifestyle-events .header .txt-box h3 { font: var(--subheader-mobile); letter-spacing: var(--subheader-mobile-letterspacing); margin: 0 0 3rem; }
@media only screen
and (min-width : 961px) {
    .lifestyle-events .header { padding-bottom: 10.7rem; }
    .lifestyle-events .header h2 { font-size: 7.5em; line-height: 1em; }
    .lifestyle-events .header .txt-box h3 { font: var(--subheader); letter-spacing: var(--subheader-letterspacing); }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
}


.lifestyle-events .cards-container { margin-bottom: 16rem; }

.lifestyle-events .cards-container article { position: relative; margin: 0 0 9.3rem; }

.lifestyle-events .cards-container article .date-box { background-color: var(--forest); color: var(--bath-salts); font-family: var(--blackdelights-font); padding: 1.3rem; }
.lifestyle-events .cards-container article .date-box h3 { font-size: 2.5em; line-height: 1.1em; letter-spacing: .008em; }
.lifestyle-events .cards-container article .date-box h3::after { content: ','; }
.lifestyle-events .cards-container article .date-box h2 { margin: .75rem 0 0; text-align: center; font-size: 5.5em; line-height: 1.1em; letter-spacing: .0036em; }

.lifestyle-events .cards-container article .description-box { color: var(--forest); text-align: center; padding: 2rem 4.7rem 8rem; border: .1rem solid var(--forest); }
.lifestyle-events .cards-container article .description-box h4 { text-transform: uppercase; font-weight: 500; font-size: 2em; line-height: 1.5em; letter-spacing: .01em; margin: 0 0 2rem; }
.lifestyle-events .cards-container article .description-box p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

.lifestyle-events .cards-container article .bttn-box { position: absolute; right: -1rem; bottom: -6.6rem;  }
.lifestyle-events .cards-container article .bttn-box a { text-transform: uppercase; font-weight: 500; font-size: 1.5em; line-height: 1.5em; letter-spacing: .08em; color: var(--limestone); display: inline-flex; justify-content: center; align-items: center; width: 13.2rem; height: 13.2rem; border: .1rem solid transparent; position: relative; }
.lifestyle-events .cards-container article .bttn-box a span { position: relative; z-index: 2; }
.lifestyle-events .cards-container article .bttn-box a span::before { content: ''; display: block; width: 4.6rem; height: 1rem; background: url('../../img/layout/globals/arrow.svg') no-repeat right center; background-size: cover; position: absolute; right: -1rem; top: 100%; transition: all .3s linear; }
.lifestyle-events .cards-container article .bttn-box a::before,
.lifestyle-events .cards-container article .bttn-box a::after { content: ''; width: 100%; height: 100%; border-radius: 100%; position: absolute; top: 50%; left: 50%; transition: all .3s linear; z-index: 1; }
.lifestyle-events .cards-container article .bttn-box a::before { border: .1rem solid var(--gilded-age); transform: translate(-50%, -50%) scale(1.15); }
.lifestyle-events .cards-container article .bttn-box a::after { background-color: var(--forest); transform: translate(-50%, -50%) scale(1); }
.lifestyle-events .cards-container article .bttn-box a:hover::before { transform: translate(-50%, -50%) scale(0); }
.lifestyle-events .cards-container article .bttn-box a:hover::after { transform: translate(-50%, -50%) scale(1.15); }
.lifestyle-events .cards-container article .bttn-box a:hover span::before { translate: .5rem; }
@media only screen
and (min-width : 961px) {
    .lifestyle-events .cards-container { display: flex; flex-wrap: wrap; column-gap: 15rem; margin-bottom: 4.2rem; }
    .lifestyle-events .cards-container article { flex: 0 1 calc(50% - 7.5rem); max-width: calc(50% - 7.5rem); margin: 0 0 12rem; }

    .lifestyle-events .cards-container article .date-box h3 { line-height: 1em; }
    .lifestyle-events .cards-container article .date-box h2 { font-size: 10em; line-height: 1em; letter-spacing: .002em; }

    .lifestyle-events .cards-container article .description-box { min-height: 19.9rem; }

    .lifestyle-events .cards-container article .bttn-box { width: 15rem; height: 15rem; right: -7.5rem; bottom: -7.5rem; }
}
@media only screen
and (min-width : 961px)
and (max-width : 1440px) {
}
@media only screen
and (min-width : 0)
and (max-width : 960px) {
    .lifestyle-events .cards-container { padding-right: 4rem; }
}
/* @end Events Section
------------------------------------ */

/* @end */