.cookies {
    position: fixed;
    bottom: 31px;
    left: 50%;
    transform: translate(-50%, 200%);
    width: 93%;
    background-color: var(--color-secondary-400);
    z-index: 20;
    transition: all ease-out 0.25s
}

.cookies--shown {
    transform: translate(-50%, 0);
}

.cookies__container {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin: 29px 24px;
}

.cookies__content {
    display: flex;
    gap: 21px;
}

.cookies__content svg {
    width: 16px;
    height: 25px;
    min-width: 16px;
    fill: var(--color-primary-300);
    transform: scaleY(-1);
}

.cookies__content p {
    font: 14px/25px font-primary;
    letter-spacing: 1.12px;
    color: var(--color-primary-300);
    margin: 0;
}

.cookies__buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cookies__buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 600 14px/25px font-primary;
    color: var(--color-primary-600);
    width: 104px;
    cursor: pointer;
    transition: all ease-out 0.25s;
}

.cookies__buttons a:hover {
    color: var(--color-primary-500);
}

.cookies__buttons a:focus {
    text-decoration: underline;
}

.cookies__buttons a:active {
    color: var(--color-primary-400);
}

.cookies__buttons button {
    font: normal normal 600 14px/25px font-primary;
    color: var(--color-primary-600);
    width: 54px;
    height: 48px;
    transition: all ease-out 0.25s;
}

.cookies__buttons button:hover {
    color: var(--color-primary-500);
}

.cookies__buttons button:focus {
    text-decoration: underline;
}

.cookies__buttons button:active {
    color: var(--color-primary-400);
}

@media screen and (min-width: 576px) {
    .cookies {
        bottom: 32px;
        width: 88%;
    }

    .cookies__container {
        gap: 0;
        margin: 31px 36px;
    }
    
    .cookies__content {
        gap: 16px;
    }
}

@media screen and (min-width: 768px) {
    .cookies {
        bottom: 35px;
        width: 89%;
    }

    .cookies__container {
        margin: 31px 28px 20px 36px;
    }
    
    .cookies__content {
        gap: 16px;
    }
}

@media screen and (min-width: 912px) {
    .cookies {
        bottom: 29px;
        width: 91%;
    }

    .cookies__container {
        margin-bottom: 18px;
    }

    .cookies__content {
        gap: 29px;
    }
}

@media screen and (min-width: 1200px) {
    .cookies {
        bottom: 46px;
        width: 87%;
    }
    
    .cookies__container {
        flex-direction: row;
        gap: 19px;
        margin: 31px 46px;
    }
    
    .cookies__content {
        gap: 29px;
    }
    
    .cookies__buttons {
        flex: 1;
        justify-content: space-between;
    }
    
    .cookies__buttons a {
        width: auto;
    }
    
    .cookies__buttons button {
        width: auto;
        height: auto;
    }
}

@media screen and (min-width: 1400px) {
    .cookies {
        bottom: 66px;
        width: 86%;
    }
    
    .cookies__container {
        margin: 52px 57px;
    }
    
    .cookies__content {
        gap: 36px;
    }

    .cookies__content svg {
        min-width: unset;
        width: 20px;
        height: 35px;
    }

    .cookies__content p {
        font: 18px/35px font-primary;
        letter-spacing: 1.44px;
    }
    
    .cookies__buttons a {
        font: normal normal 600 18px/24px font-primary;
    }
    
    .cookies__buttons button {
        font: normal normal 600 18px/24px font-primary;
    }
}