.btn-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    user-select: none;
    padding: 8px 64px;
    transition-duration: 500ms;
    font-weight: 700;
    gap: 12px;
    border-radius: 6px;
    background-color: transparent;
    color: #fff5e7;
    &:hover {
        color: #f9dbb5;
        &::after {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
    }
    &::before {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 4px;
        border-width: 2px;
        border-color: #fff5e7;
    }
    &::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        transition-duration: 500ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 4px;
        border-width: 2px;
        border-color: #f9dbb5;
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    }
}

.btn-secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 600;
    padding: 12px 56px;
    font-size: 22px;
    border-radius: 4px;
    user-select: none;
    background-image: linear-gradient(
        180deg,
        #f9dbb5 0%,
        #d4ac85 70%,
        #a16a41 100%
    );
    background-size: 100% 200%;
    background-position: top;
    transition: background-position 0.3s;
    &:hover {
        background-position: bottom;
    }
}
.btn-tertiary {
    border: 2px solid #f9dbb5;
    color: #f9dab3;
    padding: 10px 40px;
    transition: 0.5s;
    &:hover {
        background-color: #f9dab3;
        color: black;
    }
}
.main-gradient {
    background: linear-gradient(149deg, #fff5e7 0%, #f9dab3 100%);
}
.rhombus {
    transform: rotate(-45deg) skew(40deg, 40deg);
}
@media (width < 640px) {
    .btn-secondary {
        padding: 10px 20px;
        font-size: 16px;
    }
    .btn-tertiary {
        font-size: 16px;
    }
}