.extra-pocket-redirect {
    --redirect-color-card-bg: #f0ebfb;
    --redirect-color-text: #1f2e45;
    --redirect-color-divider: #d5c7f3;
    --redirect-color-badge-bg: #000000;
    --redirect-color-placeholder: #d9d9d9;

    --redirect-title-size-mobile: 1rem;
    --redirect-title-lh-mobile: 1.5rem;
    --redirect-title-size-desktop: 1.25rem;
    --redirect-title-lh-desktop: 1.875rem;

    --redirect-body-size-mobile: 0.75rem;
    --redirect-body-lh-mobile: 1.125rem;
    --redirect-body-size-desktop: 0.875rem;
    --redirect-body-lh-desktop: 1.3125rem;

    --redirect-label-size: 0.75rem;
    --redirect-label-lh: 1.125rem;

    --redirect-icon-size-mobile: 11.25rem;
    --redirect-icon-size-desktop: 8rem;

    --redirect-badge-width: 6.25rem;
    --redirect-badge-height: 2rem;
    --redirect-badge-radius: 0.25rem;

    --redirect-card-radius-mobile: 60px 20px 60px 20px;
    --redirect-card-radius-desktop: 80px 20px 80px 20px;

    --redirect-card-gap-mobile: 2rem;
    --redirect-card-gap-desktop: 2.5rem;

    --redirect-content-gap-mobile: 1.5rem;
    --redirect-content-gap-desktop: 2.5rem;

    --redirect-text-gap-mobile: 1rem;
    --redirect-text-gap-desktop: 0.5rem;

    --redirect-download-gap-mobile: 1rem;
    --redirect-download-gap-desktop: 0.5rem;

    --redirect-badges-gap: 1rem;

    --redirect-card-padding-mobile: 2.5rem;
    --redirect-card-py-desktop: 2.25rem;
    --redirect-card-px-desktop: 4.375rem;

    --redirect-section-py-mobile: 2.5rem;
    --redirect-section-px-mobile: 1.5rem;
    --redirect-section-py-desktop: 2.5rem;

    padding: var(--redirect-section-py-mobile) var(--redirect-section-px-mobile);

    display: flex;
    justify-content: center;
}

.extra-pocket-redirect__card {
    background-color: var(--redirect-color-card-bg);
    background-size: cover;
    background-position: center;
    border-radius: var(--redirect-card-radius-mobile);
    padding: var(--redirect-card-padding-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--redirect-card-gap-mobile);
    width: 100%;
}

.extra-pocket-redirect__icon {
    width: var(--redirect-icon-size-mobile);
    height: var(--redirect-icon-size-mobile);
    flex-shrink: 0;
    align-self: flex-start;
}

.extra-pocket-redirect__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.extra-pocket-redirect__icon-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--redirect-color-placeholder);
    border-radius: 50%;
}

.extra-pocket-redirect__content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--redirect-content-gap-mobile);
    width: 100%;
}

.extra-pocket-redirect__text {
    display: flex;
    flex-direction: column;
    gap: var(--redirect-text-gap-mobile);
}

.extra-pocket-redirect__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: var(--redirect-title-size-mobile);
    line-height: var(--redirect-title-lh-mobile);
    color: var(--redirect-color-text);
    margin: 0;
}

.extra-pocket-redirect__subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: var(--redirect-body-size-mobile);
    line-height: var(--redirect-body-lh-mobile);
    color: var(--redirect-color-text);
    margin: 0;
}

.extra-pocket-redirect__divider {
    width: 100%;
    height: 0;
    border-top: 1px solid var(--redirect-color-divider);
}

.extra-pocket-redirect__download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--redirect-download-gap-mobile);
}

.extra-pocket-redirect__download-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: var(--redirect-label-size);
    line-height: var(--redirect-label-lh);
    color: var(--redirect-color-text);
    text-align: center;
    margin: 0;
}

.extra-pocket-redirect__badges {
    display: flex;
    flex-direction: row;
    gap: var(--redirect-badges-gap);
}

.extra-pocket-redirect__badge {
    display: block;
    width: var(--redirect-badge-width);
    height: var(--redirect-badge-height);
    background-color: var(--redirect-color-badge-bg);
    border-radius: var(--redirect-badge-radius);
    overflow: hidden;
    flex-shrink: 0;
}

.extra-pocket-redirect__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.extra-pocket-redirect__badge-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--redirect-color-badge-bg);
}

@media (min-width: 769px) {
    .extra-pocket-redirect {
        padding: var(--redirect-section-py-desktop) 0;
    }

    .extra-pocket-redirect__card {
        flex-direction: row;
        align-items: center;
        gap: var(--redirect-card-gap-desktop);
        padding: var(--redirect-card-py-desktop) var(--redirect-card-px-desktop);
        border-radius: var(--redirect-card-radius-desktop);
    }

    .extra-pocket-redirect__icon {
        width: var(--redirect-icon-size-desktop);
        height: var(--redirect-icon-size-desktop);
    }

    .extra-pocket-redirect__content {
        flex-direction: row;
        align-items: center;
        gap: var(--redirect-content-gap-desktop);
        flex: 1;
    }

    .extra-pocket-redirect__text {
        flex: 1;
        gap: var(--redirect-text-gap-desktop);
    }

    .extra-pocket-redirect__title {
        font-size: var(--redirect-title-size-desktop);
        line-height: var(--redirect-title-lh-desktop);
    }

    .extra-pocket-redirect__subtitle {
        font-size: var(--redirect-body-size-desktop);
        line-height: var(--redirect-body-lh-desktop);
    }

    .extra-pocket-redirect__divider {
        width: 0;
        height: auto;
        border-top: none;
        border-left: 1px solid var(--redirect-color-divider);
        align-self: stretch;
    }

    .extra-pocket-redirect__download {
        gap: var(--redirect-download-gap-desktop);
        flex-shrink: 0;
    }
}