.Pricing { display: grid; grid-template-rows: 150px auto auto auto 1fr; & article { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; background-color: var(--color-orange-black); overflow: hidden; &:nth-child(2) { border-top-left-radius: 20px; border-bottom-left-radius: 20px; } &:nth-child(4) { border-top-right-radius: 20px; border-bottom-right-radius: 20px; } &:nth-child(3) { z-index: 100; scale: 1.05; border-radius: 20px; } & .value { padding: 2rem; text-align: center; &.fat { font-family: 'Roboto Condensed', sans-serif; font-weight: bold; font-size: 1.5rem; } &.odd { background: var(--color-black); } } & header, & main, & footer { padding: var(--spacing-standard); display: flex; flex-direction: column; justify-content: center; } & footer { align-items: center; color: var(--color-orange); gap: .5rem; & .price { font-size: 2rem; font-weight: bold; } } &:nth-child(3) header { background: var(--color-orange); color: var(--color-black); } &:not(:nth-child(3)) header { background: var(--color-orange-dark); color: var(--color-white); } & header { position: relative; width: 100%; & strong { font-size: 2rem; z-index: 1; } & .bg-icon { position: absolute; top: 50%; right: 25%; translate: 50% -50%; font-size: 6rem; opacity: 0.15; } } } }