/* Choose */
.choose {background: var(--_c-grad-primary); padding-bottom: 2rem;}
.choose .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; gap: 4rem;}
.choose .content > :first-child {font-size: var(--fs-xxl, 46px); text-transform: capitalize; margin-bottom: 1rem;}
.choose .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 500; margin-bottom: 0.5rem;}
.choose .content p:not(:last-of-type) {margin-bottom: 1.5rem;}
.choose .image img {margin: auto;}

/* Straight */
.straight {padding-block: 3rem;}
.straight[data-bg="true"]{background-color: var(--_c-lgt-primary);}
.straight .wrapper {display: grid; grid-template-columns: 598px 1fr; align-items: center; gap: 3rem;}
.straight .image img {margin: auto;}
.straight .content > :first-child {font-size: var(--fs-xxl, 46px); text-transform: capitalize; margin-bottom: 1rem;}
.straight .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 500; margin-bottom: 0.5rem;}
.straight .content p {margin-bottom: 1rem;}
.straight .content p:last-of-type {margin-bottom: 2rem;}
.straight .content a {position: relative; text-wrap: wrap; margin-left: auto; padding: 0.625rem 1.75rem; border-radius: 3px;}
.straight .content a::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Customization */
.customization {background-color: var(--_c-lgt-primary); padding-block: 2rem;}
.customization .head {text-align: center; margin-bottom: 2.5rem;}
.customization .head > :first-child {font-size: var(--fs-lg, 32px); text-transform: capitalize;}
.customization .head > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 1rem;}
.customization .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2.5rem;}
.customization .card {display: flex; flex-direction: column; gap: 1.25rem; background-color: #fff; padding: 1rem 1rem 2rem; border-radius: 10px; box-shadow: var(--_shdw-black);}
.customization .card img {width: 255px; height: 255px; margin-inline: auto;}
.customization .card > :nth-child(2) {font-size: var(--fs-md, 24px); text-align: center; text-transform: capitalize;}
.customization .card ul {padding-left: 1.75rem;}
.customization .card li {list-style: disc;}
.customization .card li:not(:last-of-type) {margin-bottom: 0.625rem;}
.customization .btn__primary {position: relative; text-wrap: wrap; padding: 0.625rem 1.75rem; border-radius: 3px; margin-inline: auto;}
.customization .btn__primary::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Protective */
.protective {padding-block: 3rem;}
.protective .wrapper {display: grid; grid-template-columns: 1fr 598px; gap: 2rem;}
.protective .image img {margin: auto;}
.protective .content > :first-child {font-size: var(--fs-xxl, 46px); text-transform: capitalize; margin-bottom: 1rem;}
.protective .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 0.5rem;}
.protective .content p {margin-bottom: 1rem;}
.protective .content p:last-of-type {margin-bottom: 2rem;}
.protective .content a {position: relative; text-wrap: wrap; margin-left: auto; padding: 0.625rem 1.75rem; border-radius: 3px;}
.protective .content a::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Printed */
.printed {background-color: var(--_c-lgt-primary); padding-block: 3rem;}
.printed .wrapper {display: grid; grid-template-columns: 598px 1fr; gap: 2rem;}
.printed .image img {margin: auto;}
.printed .content > :first-child {font-size: calc(var(--fs-xxl, 46px) - 4px); text-transform: capitalize; margin-bottom: 1rem;}
.printed .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 0.5rem;}
.printed .content p {margin-bottom: 1rem;}
.printed .content p:last-of-type {margin-bottom: 2rem;}
.printed .content a {position: relative; text-wrap: wrap; margin-left: auto; padding: 0.625rem 1.75rem; border-radius: 3px;}
.printed .content a::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Brand */
.brand {padding-block: 3rem;}
.brand .wrapper {display: grid; grid-template-columns: 1fr 598px; gap: 2rem;}
.brand .image img {margin: auto;}
.brand .content > :first-child {font-size: calc(var(--fs-xxl, 46px) - 4px); text-transform: capitalize; margin-bottom: 1rem;}
.brand .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 0.5rem;}
.brand .content p {margin-bottom: 1rem;}
.brand .content p:last-of-type {margin-bottom: 2rem;}
.brand .content a {position: relative; text-wrap: wrap; margin-left: auto; padding: 0.625rem 1.75rem; border-radius: 3px;}
.brand .content a::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Custom */
.custom {background-color: var(--_c-lgt-primary); padding-block: 3rem;}
.custom .wrapper {display: grid; grid-template-columns: 598px 1fr; gap: 2rem;}
.custom .image img {margin: auto;}
.custom .content > :first-child {font-size: calc(var(--fs-lg, 32px) + 4px); text-transform: capitalize; margin-bottom: 1rem;}
.custom .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 0.5rem;}
.custom .content p {margin-bottom: 1rem;}
.custom .content p:last-of-type {margin-bottom: 2rem;}
.custom .content a {position: relative; text-wrap: wrap; margin-left: auto; padding: 0.625rem 1.75rem; border-radius: 3px;}
.custom .content a::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Volume */
.volume {padding-block: 3rem;}
.volume .wrapper {display: grid; grid-template-columns: 1fr 598px; gap: 2rem;}
.volume .image img {margin: auto;}
.volume .content > :first-child {font-size: calc(var(--fs-xxl, 46px) - 4px); text-transform: capitalize; margin-bottom: 1rem;}
.volume .content > :first-child * {display: block; font-size: calc(var(--fs-base, 16px) + 2px); font-weight: 700; margin-bottom: 0.5rem;}
.volume .content p {margin-bottom: 1rem;}
.volume .content p:last-of-type {margin-bottom: 2rem;}
.volume .content a {position: relative; text-wrap: wrap; margin-left: auto; padding: 0.625rem 1.75rem; border-radius: 3px;}
.volume .content a::before {position: absolute; inset: 0 12px 0 auto; width: 0.375rem; height: 0.625rem; background: no-repeat center/cover url('https://customcosmeticboxes.com/wp-content/themes/customcosmeticboxes/assets/images/icons/chevron-right.svg'); content: ''; margin-block: auto;}

/* Media Queries */
@media only screen and (max-width: 1200px) {
    /* Choose */
    .choose .wrapper {gap: 2rem;}
    /* Stright */
    .straight .wrapper {gap: 1.5rem;}
    /* Protective */
    .protective .wrapper {gap: 1.5rem;}
    /* Printed */
    .printed .wrapper {gap: 1.5rem;}
    /* Brand */
    .brand .wrapper {gap: 1.5rem;}
    /* Custom */
    .custom .wrapper {gap: 1.5rem;}
    /* Volume */
    .volume .wrapper {gap: 1.5rem;}
}
@media only screen and (max-width: 991px) {
    /* Choose */
    .choose {padding-block: 1.5rem;}
    .choose .wrapper {grid-template-columns: 1fr; gap: 1.5rem;}
    .choose .content > :first-child {margin-bottom: 0.75rem;}
    .choose .content p:not(:last-of-type) {margin-bottom: 1rem;}
     /* Straight */
    .straight {padding-block: 1.5rem;}
    .straight .wrapper {grid-template-columns: 1fr;}
    .straight[data-img="left"] .wrapper {grid-template-columns: 1fr;}
    .straight .image {order: 2;}
    .straight .content {order: 1;}
    .straight .content > :first-child {margin-bottom: 0.75rem;}
	.straight .content p:last-of-type {margin-bottom: 1rem;}
    .straight .content a {padding: 0.5rem 1.25rem;}
    .straight .content a::before {right: 8px;}
    /* Customization */
    .customization {padding-block: 1.25rem;}
    .customization .head {margin-bottom: 1.25rem;}
    .customization .wrapper {grid-template-columns: repeat(2, 1fr); gap: 1rem;}
    /* Protective */
    .protective {padding-block: 1.5rem;}
    .protective .wrapper {grid-template-columns: 1fr;}
    .protective .image {order: 2;}
    .protective .content {order: 1;}
    .protective .content > :first-child {margin-bottom: 0.75rem;}
	.protective .content p:last-of-type {margin-bottom: 1rem;}
    .protective .content a {padding: 0.5rem 1.25rem;}
    .protective .content a::before {right: 8px;}
    /* Printed */
    .printed {padding-block: 1.5rem;}
    .printed .wrapper {grid-template-columns: 1fr;}
    .printed .image {order: 2;}
    .printed .content {order: 1;}
    .printed .content > :first-child {margin-bottom: 0.75rem;}
	.printed .content p:last-of-type {margin-bottom: 1rem;}
    .printed .content a {padding: 0.5rem 1.25rem;}
    .printed .content a::before {right: 8px;}
    /* Brand */
    .brand {padding-block: 1.5rem;}
    .brand .wrapper {grid-template-columns: 1fr;}
    .brand .image {order: 2;}
    .brand .content {order: 1;}
    .brand .content > :first-child {margin-bottom: 0.75rem;}
	.brand .content p:last-of-type {margin-bottom: 1rem;}
    .brand .content a {padding: 0.5rem 1.25rem;}
    .brand .content a::before {right: 8px;}
    /* Custom */
    .custom {padding-block: 1.5rem;}
    .custom .wrapper {grid-template-columns: 1fr;}
    .custom .image {order: 2;}
    .custom .content {order: 1;}
    .custom .content > :first-child {margin-bottom: 0.75rem;}
	.custom .content p:last-of-type {margin-bottom: 1rem;}
    .custom .content a {padding: 0.5rem 1.25rem;}
    .custom .content a::before {right: 8px;}
    /* Volume */
    .volume {padding-block: 1.5rem;}
    .volume .wrapper {grid-template-columns: 1fr;}
    .volume .image {order: 2;}
    .volume .content {order: 1;}
    .volume .content > :first-child {margin-bottom: 0.75rem;}
	.volume .content p:last-of-type {margin-bottom: 1rem;}
    .volume .content a {padding: 0.5rem 1.25rem;}
    .volume .content a::before {right: 8px;}
}
@media only screen and (max-width: 767px) {
	/* Customization */
    .customization .wrapper {grid-template-columns: 1fr; margin-bottom: 1rem;}
    .customization .card {max-width: 354px; margin-inline: auto;}
}
@media only screen and (max-width: 575px) {
    /* Choose */
    .choose {padding-block: 1rem;}
    .choose .wrapper {margin-bottom: 1rem;}
    .choose .content > :first-child {margin-bottom: 0.5rem;}
    .choose .content > :first-child * {margin-bottom: 0.25rem;}
    .choose .content p:not(:last-of-type) {margin-bottom: 0.5rem;}
     /* Straight */
    .straight {padding-block: 1rem;}
    .straight .wrapper {margin-bottom: 1rem;}
    .straight .content > :first-child {margin-bottom: 0.5rem;}
    .straight .content p {margin-bottom: 0.625rem;}
	.straight .content p:last-of-type {margin-bottom: 0.75rem;}
    .straight .content a {padding: 0.375rem 0.625rem;}
    .straight .content a::before {right: 3px; width: 0.25rem;}
    /* Customization */
    .customization {padding-block: 0.75rem;}
    .customization .head {margin-bottom: 0.75rem;}
    .customization .card {gap: 0.75rem; padding: 0.75rem 0.75rem 1.25rem;}
    .customization .card img {width: 9.375rem;}
    .customization .btn__primary {padding: 0.375rem 0.75rem;}
    .customization .btn__primary::before {width: 0.25rem; right: 4px;}
    /* Protective */
    .protective {padding-block: 1rem;}
    .protective .wrapper {margin-bottom: 1rem;}
    .protective .content > :first-child {margin-bottom: 0.5rem;}
    .protective .content p {margin-bottom: 0.625rem;}
	.protective .content p:last-of-type {margin-bottom: 0.75rem;}
    .protective .content a {padding: 0.375rem 0.625rem;}
    .protective .content a::before {right: 3px; width: 0.25rem;}
    /* Printed */
    .printed {padding-block: 1rem;}
    .printed .wrapper {margin-bottom: 1rem;}
    .printed .content > :first-child {margin-bottom: 0.5rem;}
    .printed .content p {margin-bottom: 0.625rem;}
	.printed .content p:last-of-type {margin-bottom: 0.75rem;}
    .printed .content a {padding: 0.375rem 0.625rem;}
    .printed .content a::before {right: 3px; width: 0.25rem;}
    /* Brand */
    .brand {padding-block: 1rem;}
    .brand .wrapper {margin-bottom: 1rem;}
    .brand .content > :first-child {margin-bottom: 0.5rem;}
    .brand .content p {margin-bottom: 0.625rem;}
	.brand .content p:last-of-type {margin-bottom: 0.75rem;}
    .brand .content a {padding: 0.375rem 0.625rem;}
    .brand .content a::before {right: 3px; width: 0.25rem;}
    /* Custom */
    .custom {padding-block: 1rem;}
    .custom .wrapper {margin-bottom: 1rem;}
    .custom .content > :first-child {margin-bottom: 0.5rem;}
    .custom .content p {margin-bottom: 0.625rem;}
	.custom .content p:last-of-type {margin-bottom: 0.75rem;}
    .custom .content a {padding: 0.375rem 0.625rem;}
    .custom .content a::before {right: 3px; width: 0.25rem;}
    /* Volume */
    .volume {padding-block: 1rem;}
    .volume .wrapper {margin-bottom: 1rem;}
    .volume .content > :first-child {margin-bottom: 0.5rem;}
    .volume .content p {margin-bottom: 0.625rem;}
	.volume .content p:last-of-type {margin-bottom: 0.75rem;}
    .volume .content a {padding: 0.375rem 0.625rem;}
    .volume .content a::before {right: 3px; width: 0.25rem;}
}