.subscribeReminder > .left {
    grid-area: login;
}

.subscribeReminder .left section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.subscribeReminder .left section p {
    font-size: 1.3rem;
    font-weight: 400;
}

.subscribeReminder .left section .loginReminder a {
    background: var(--dark-gray);
    color: white;
}

.subscribeReminder .right {
    grid-area: kis;
}

.subscribeReminder .right section {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.subscribeReminder .right section p {
    font-size: 1.3rem;
    font-weight: 400;
}

.loginReminder *.icon.user:before {
    -webkit-mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/user.svg);
    mask-image: url(https://mediagroup-central.s3.eu-central-1.amazonaws.com/images/icons/user.svg);
    background: var(--background-white);
}

.loginReminder {
    position: relative;
    border-bottom: var(--border-dark);
    color: var(--black);
    max-height: 58px;
    border: none;
}

.loginReminder a {
    transition: background-color .3s ease,
    color .3s ease;
}

.loginReminder a:hover {
    color: white !important;
    background: var(--black) !important;
    border-radius: var(--border-radius);
}


@media (min-width: 767px) {
    .subscribeReminder {
        display: grid;
        gap: -5px;
        grid-template-areas: 'login kis';
        grid-template-columns: 2.5fr 3fr;
        background: var(--gray);
        border-radius: var(--border-radius);
    }

    .subscribeReminder .right section div {
        display: grid;
        grid-template-columns: auto auto;
        gap: 1rem;
    }
}

@media (max-width: 767px) {
    .subscribeReminder {
        display: grid;
        gap: -5px;
        grid-template-areas:
                'login'
                'kis';
        background: var(--gray);
        border-radius: var(--border-radius);
    }

    .subscribeReminder .right section div {
        display: grid;
        grid-template-rows: auto auto;
        gap: 1rem;
    }
}

@media (prefers-color-scheme: dark) {
    .subscribeReminder {
        background: var(--gray);
    }

    .subscribeReminder .left section .loginReminder a {
        background: var(--black);
        color: black;
    }

    .subscribeReminder .right section p,
    .subscribeReminder .left section p {
        color: white;
    }

    .subscribeReminder .right section div white {
        background-color: black;
        color: white;
    }

    .loginReminder *.icon.user:before,
    .loginReminder *.icon.user-data:before {
        background: var(--white) !important;
    }

    .loginReminder a:hover {
        color: black !important;
        background: var(--dark-gray) !important;
    }

}