*[class^="banner--"] {
    box-sizing: border-box;
}

@media screen and (min-width: 1200px) {
    .banner--default {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        row-gap: 72px;

        width: 240px;
        max-width: 240px;
        padding: 36px 16px;
        border: 1px solid var(--brand-text-color);
        border-radius: 12px;
        background-color: var(--bg-secondary);
        background-image: url('../images/banner_wave-purple.svg'),
            var(--banner__url);
        background-repeat: no-repeat;
        transition: border-color var(--transition-primary);

        p {
            margin: 0;
        }

        &:hover {
            border-color: var(--brand-color--accent);
        }

        &:hover .banner__actions p {
            color: var(--brand-color--accent);
            background-image: url('../images/arrow-right-HOVER.svg');
        }
    }

    .banner--default .banner__heading {
        font-size: 16px;
        font-weight: 600;
    }

    .banner--default .banner__price {
        font-size: 16px;
        font-weight: 500;
    }

    .banner--default .banner__body {
        display: flex;
        flex-direction: column;
        row-gap: 16px;
    }

    .banner__badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;

        .badge {
            font-size: 12px;
            padding: 8px;
            border-radius: 30px;
            background: #ede4f9;
        }
    }

    .banner--default .banner__actions p {
        font-size: 16px;
        font-weight: 700;
        color: var(--brand-text-color);
        transition: color var(--transition-primary), background-image var(--transition-primary);

        display: block;
        max-width: 180px;

        background-image: url('../images/arrow-right.svg');
        background-position: right center;
        background-repeat: no-repeat;
    }

    .banner--mobile {
        display: none;
    }
}

@media screen and (max-width: 1199px) {
    .banner--mobile {
        position: fixed;
        top: 89px;
        left: 0;

        font-size: 16px;
        width: 100%;
        padding: 9px 0px;

        background-color: var(--bg-primary);
        border-bottom: 0.50px solid var(--brand-text-color);

        p {
            margin: 0;
        }
    }

    .banner--mobile .container {
        display: flex;
        justify-content: space-between;
    }

    .banner--mobile .banner__content {
        font-weight: 500;
    }

    .banner--mobile .banner__title {
        font-weight: 600;
        margin-bottom: 2px;
    }

    .banner--mobile .banner__ctx--contained {
        font-weight: 700;
        line-height: 1.5;
        text-align: center;

        padding: 8px 24px;
        color: var(--text-color-white);
        border-radius: 40px;
        background-color: var(--brand-color);
    }

    .banner--default {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .banner--mobile {
        top: 70px;
        font-size: 14px;
    }
}

@media screen and (max-width: 767px) {
    .banner--mobile {
        font-size: 12px;
    }
}