:root {
    --barlow: 'barlow', Arial, sans-serif;
    --weightRegular: 400;
    --weightMedium: 500;
    --weightSemiBold: 600;
    --color-white: #FFFFFF;
    --color-black: #171717;
    --color-grey: #CECECE;
    --color-yellow: #FFE07F;
    --color-green: #84C88B;
    --color-pink: #D27FA0;
    --color-purple: #8A72B3;
    --color-beige: #FDD09E;
    --color-brown: #8F6C5E;
    --color-brown50: #FEFAF6;
    --color-brown100: #F8DEBF;
    --color-brown300: #E8AA8D;
    --color-brown500: #CA7762;
    --color-brown700: #6C3E33;
    --color-gradientBrown: linear-gradient(90deg, #F7DDBB 0.24%, #F5EDCC 18.59%, #F6D2A4 38.19%, #CF785F 58.1%, #764234 79.23%, #D98F6A 100.06%);
    --max-mobile: screen and (max-width: 480px);
    --min-mobile: screen and (min-width: 481px);
    --max-tablet: screen and (max-width: 767px);
    --min-tablet: screen and (min-width: 768px);
    --max-laptop: screen and (max-width: 1024px);
    --min-laptop: screen and (min-width: 1025px);
    --max-desktop: screen and (max-width: 1280px);
    --min-desktop: screen and (min-width: 1281px);
}

.container--large {
    max-width: 1280px;
    margin-inline: auto;
}

.button-btn {
    position: relative;
    border: 1px solid var(--color-brown700);
    border-radius: 48px;
    font-family: var(--barlow);
    font-weight: 600;
    font-size: 1rem;
    line-height: 150%;
    color: var(--color-brown700);
    width: max-content;
    margin: 1.5rem auto 3rem auto;
}

.button-btn a {
    padding: 1rem 3.5rem 1rem 1.5rem;
    display: inline-flex;
}

.button-btn::after {
    content: url("/app/themes/apo/public/images/icon/arrow_right-up_brown700.svg");
    position: absolute;
    width: 24px;
    top: 17px;
    right: 21px;
}

.button-btn:hover {
    background-color: var(--color-brown100);
}