.benefitCardWrapper { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-column: 1/3; padding: var(--Spacing-x2); padding-top: 0; } .firstColumn { background-color: var(--Main-Brand-PalePeach); position: absolute; top: 0; bottom: 0; left: 0; right: 50%; z-index: 1; } .secondColumn { background-color: var(--Base-Background-Normal); position: absolute; position: absolute; top: 0; bottom: 0; margin-bottom: calc(var(--Spacing-x2) * -1); left: 50%; right: 0; z-index: 1; border-top-left-radius: var(--Corner-radius-Medium); } @media screen and (min-width: 950px) { .benefitCardWrapper { grid-column: 1/4; } .firstColumn { width: calc((100%) / 3); right: calc(100% / 3 * 2); margin-left: 0; } .secondColumn { width: calc(100% / 3); left: calc(100% / 3); right: calc(100% / 3); } }