// a card .c-img-card { $bp-collapse: $bp-s; z-index: 1; position: relative; border-radius: 8px; overflow: hidden; &__body { padding: 32px 48px; } &__body-bg { z-index: -1; position: absolute; width: 100%; height: 100%; top: 0; left: 0; } @media (max-width: $bp-collapse) { &__header, &__body, &__body-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } &__header { z-index: -1; } &__body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } &__body-bg { opacity: 0.6; } } @media (min-width: $bp-collapse) { display: flex; flex-direction: column; &__header, &__body { display: flex; flex-direction: column; justify-content: center; } &__header { flex: 0 1 50%; } &__body { position: relative; flex: 1 0 50%; } &__body-bg { opacity: 1; } } }