.block-promo .block-container {
        position: relative;
        aspect-ratio: 400 / 500;
        border-radius: 0.5rem;
        overflow: hidden;
    }

.block-promo .block-container .content-wrapper {
            position: relative;
            height: 100%;
            padding: 1.875rem 1.375rem;
            display: flex;
            flex-direction: column;
            justify-content: end;
        }

.block-promo .block-container .content-wrapper .heading {
                color: white;
                font-size: 2.5rem;
                line-height: 3.6875rem;
                font-weight: 400;
            }

.block-promo .block-container .content-wrapper .subheading p {
                color: white;
                font-size: 1.25rem;
                line-height: 1.8125rem;
            }

.block-promo .block-container .content-wrapper .buttons-container {
                padding-top: 1rem;
                display: flex;
                flex-wrap: wrap;
                gap: 1rem;
            }

.block-promo .block-container .content-wrapper .buttons-container .btn {
                    font-size: 0.9375rem;
                    padding-inline: 1.25rem;
                    flex-grow: 1;

                    /* third button */
                }

.block-promo .block-container .content-wrapper .buttons-container .btn:nth-child(3) {
                        flex-basis: 100%;
                    }

@media screen and (min-width: 48rem) {
        .block-promo .block-container {
            aspect-ratio: 2;
        }
                    .block-promo .block-container .content-wrapper .buttons-container .btn {
                        flex-grow: 0;
                        font-size: 1rem;
                        padding-inline: 1.875rem;
                    }

                        .block-promo .block-container .content-wrapper .buttons-container .btn:nth-child(3) {
                            flex-basis: auto;
                        }
}

@media screen and (min-width: 64rem) {
            .block-promo .block-container .content-wrapper {
                padding: 3.375rem 4.5rem;
            }

                .block-promo .block-container .content-wrapper .heading {
                    font-size: 2.75rem;
                    line-height: 4.125rem;
                }
                .block-promo .block-container .content-wrapper .subheading p {
                    font-size: 1.375rem;
                    line-height: 2rem;
                }
                .block-promo .block-container .content-wrapper .buttons-container {
                    padding-top: 1.25rem;
                }
}

@media screen and (min-width: 80rem) {
        .block-promo .block-container {
            aspect-ratio: 2.8;
        }
}

@media screen and (min-width: 96rem) {
        .block-promo .block-container {
            aspect-ratio: 2.88;
        }

            .block-promo .block-container .content-wrapper {
                padding: 0 7.5rem 5.625rem 7.5rem;
            }

                .block-promo .block-container .content-wrapper .heading {
                    font-size: 4.375rem;
                    line-height: 6.375rem;
                }
                .block-promo .block-container .content-wrapper .subheading p {
                    font-size: 1.5rem;
                    line-height: 2.25rem;
                }
                .block-promo .block-container .content-wrapper .buttons-container {
                    padding-top: 1.75rem;
                }
}