.benefitCard { background-color: var(--Scandic-Opacity-White-100); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Small); color: var(--Main-Brand-Burgundy); padding: 0 var(--Spacing-x2); z-index: 2; grid-column: 1/3; } .benefitCardHeader { display: grid; grid-template-columns: 1fr auto; } .benefitCardDescription { font-size: var(--typography-Caption-Regular-fontSize); line-height: 150%; } .benefitInfo { border-bottom: 1px solid var(--Base-Border-Subtle); padding: var(--Spacing-x-one-and-half) 0; } .benefitComparison { display: grid; grid-template-columns: 1fr 1fr; } .comparisonItem { display: flex; justify-content: center; align-items: center; padding: var(--Spacing-x-one-and-half); } .details[open] .chevron { transform: rotate(180deg); } .chevron { display: flex; align-items: center; } .summary::-webkit-details-marker { display: none; } .summary { list-style: none; } @media screen and (min-width: 950px) { .benefitComparison { grid-template-columns: 1fr 1fr 1fr; } }