/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ .selectable-card-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-template-rows: 1fr; grid-gap: 2rem; &.one-card { max-width: 33%; min-width: 350px; margin-left: auto; margin-right: auto; } } .selectable-card-container.has-grid { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 1fr); grid-gap: 2rem; @include until($mobile) { grid-template-columns: 2fr; } .selectable-card.is-grid-container { display: grid; grid-template-columns: 2fr 0.5fr; grid-template-rows: 1fr 2fr 0.5fr; padding: $spacing-l 0 14px $spacing-l; // modify bottom spacing to better align with other cards } } .selectable-card-container.has-grid.has-two-col-grid { grid-template-columns: 2fr 2fr; grid-template-rows: none; @include until($mobile) { grid-template-columns: 1fr; } } .selectable-card-container.has-grid.has-three-col-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: none; }