/*------------------------------------*\
    HERO CSS
\*------------------------------------*/



/* SCREENS */


/* LOCAL FIXES */



/*------------------------------------*\
    END HERO CSS
\*------------------------------------*/

/*------------------------------------*\
    GET TO KNOW CSS
\*------------------------------------*/



/* SCREENS */


/* LOCAL FIXES */
@media only screen and (max-width:734px) {
    .product-tile-headline {
    width: 101%;
    }
}

.typography-modal-badge {
	font-size: 19px;
	line-height: 1.4211026316;
	font-weight: 400;
	letter-spacing: 0.012em;
	font-family:
		SF Pro Display,
		SF Pro Icons,
		Helvetica Neue,
		Helvetica,
		Arial,
		sans-serif;
}

.modal-content-wrapper .modal-badge {
	color: #6e6e73;
	margin-top: 15px;
}
/*------------------------------------*\
    END GET TO KNOW CSS
\*------------------------------------*/

/*------------------------------------*\
    COMPARE CSS
\*------------------------------------*/



/* SCREENS */


/* LOCAL FIXES */



/*------------------------------------*\
    END COMPARE CSS
\*------------------------------------*/

/*------------------------------------*\
    SWITCH TO MAC CSS
\*------------------------------------*/



/* SCREENS */


/* LOCAL FIXES */

.section-switch .grid-item .essential-card .card-modifier {
    --gallery-side-padding: calc(50vw - min(1680px, var(--global-viewport-content-responsive))/2);
    width: 87.5vw;
    max-width: 1680px;
}

@media (min-width:1069px)and (max-width:1440px) {
    .section-switch [data-analytics-gallery-item-id="mac does that"] figure {
        padding-block-end: 23px;
        overflow-x: hidden;
    }
}

.section-switch .essential-card-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
@media only screen and (max-width: 1068px) {
	.section-switch .essential-card-content {
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
}

.section-switch .essential-card-text-container {
	align-self: auto;
	max-width: unset;
	--h-padding: 6.25%;
	padding-inline-start: var(--h-padding);
}
@media (min-width:1069px)and (min-width:1441px) {
	.section-switch .essential-card-text-container {
		--width: 480px;
	}
}
@media (min-width:1069px) {
    .section-switch .essential-card-text-container {
		--width: 400px;
		width: var(--width);
    }
}
@media (max-width:1068px) {
	.section-switch .essential-card-text-container {
		--width: 480px;
		max-width: var(--width);
		--copy-column-v-padding: 56px;
		--h-padding: 28px;
		--copy-column-v-margin: 347px;
		padding: var(--copy-column-v-padding) var(--h-padding) 0;
		align-self: center !important;
		text-align: center !important;
    }
}
@media (max-width:734px) {
    .section-switch .essential-card-text-container {
        --copy-column-v-padding: 48px;
    }
}

@media (max-width:1068px) {
	.card .card-modifier {
		min-height: unset;
	}
}

.section-switch .essential-card-image {
	margin: 0 auto;
}
@media (max-width:1068px) {
	.section-switch .essential-card-image {
		margin: 50px auto;
	}
}
@media (max-width:734px) {
	.section-switch .essential-card-image {
		margin: 75px auto 50px auto;
	}
}


/*------------------------------------*\
    END SWITCH TO MAC CSS
\*------------------------------------*/

/*------------------------------------*\
    WHY APPLE CSS
\*------------------------------------*/



/* SCREENS */


/* LOCAL FIXES */



/*------------------------------------*\
    END WHY APPLE CSS
\*------------------------------------*/

/*------------------------------------*\
    MAC ESSENTIALS CSS
\*------------------------------------*/



/* MAC ESSENTIALS HALF WIDTH */
/* SCREENS */
/* LOCAL FIXES */
/* END MAC ESSENTIALS HALF WIDTH */


/* STUDIO DISPLAY */
/* SCREENS */
/* LOCAL FIXES */
/* END STUDIO DISPLAY */



/*------------------------------------*\
    END MAC ESSENTIALS CSS
\*------------------------------------*/

/*------------------------------------*\
    A/B CTA CSS
\*------------------------------------*/


/*------------------------------------*\
    END A/B CTA CSS
\*------------------------------------*/