@import url(https://use.typekit.net/ztx1wfr.css);

:root {
    --border-w: 0.25rem;
    --border-r: 1em;
    --angle: 130deg;
}



.grid2 {
    display: inline-grid;
    grid-template-columns: 1fr 30vw;
    grid-template-rows: repeat(2, 1fr);
    gap: 1em;
}
.test {
    color: #ffddf7;
}
.btn2 {
    /* text-decoration: none; */
    /* font-weight: bold; */
    /* line-height: 1; */
    /* grid-column: 1; */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 10%;
    padding-right: 10%;
    border-radius: 10px;
    box-shadow: 0 0.05em 0.5em rgba(216, 56, 117, 0.25), 0 0.15em 0.3em -0.1em rgba(218, 28, 177, 0.25), inset 0 0 0.05em 0.0333em rgba(231, 67, 135, 0.25), inset 0 0.1em 0.2em 0em rgba(231, 67, 130, 0.25), inset 0 0.1em 0.45em rgba(216, 56, 123, 0.25);
    background: linear-gradient(var(--angle), #a80b57 25%, #c9367d 40%, #e64592 65%, #a80b57 85%) no-repeat -1px 50%/300% calc(100% + 2px);
    color: white;
    transition: color 0.3s, background 0.3s, transform 0.75s, background-position 0.5s, box-shadow 0.5s;
    will-change: background-position, transform, box-shadow;
    position: relative;
    /* border-radius: var(--border-r); */
    /* border: var(--border-w) solid #a80b57; */
}

.btn2:before,
.btn2:after {
    content: "";
    border-radius: inherit;
    position: absolute;
    transition: opacity 0.5s, filter 0.5s;

}

.btn2:before {
    /* inset: calc(var(--border-w) * -1); */
    box-shadow: inset 0.0333em 0.0333em 0.2em #ca78e5, inset -0.0666em -0.0666em 0.15em #a80b57, inset 0.025em 0.025em 0.1em white;
    mix-blend-mode: hard-light;
}

.btn2:after {
    /* inset: 0; */
    border-radius: calc(var(--border-r) - var(--border-w));
    box-shadow: -0.05em -0.05em 0.05em #a80b57, 0.05em 0.05em 0.05em #ca78e5;
    mix-blend-mode: hard-light;
}

.btn2:after {
    content: none;
}

.btn2:hover,
.btn2:focus {
    color: white;
    /* ไม่เอาเส้นเวลาชี้ */
    text-decoration: none;
    background-position: calc(100% + 1px) 50%;
    box-shadow: 0 0.15em 1.5em #a80b57, 0 0.15em 0.333em -0.1em #b85886, inset 0 0.15em 0.3em -0.1em rgba(231, 67, 130, 0), inset 0 0 0.05em 0.0333em rgba(231, 67, 176, 0.25), inset 0 0.1em 0.666em rgba(216, 56, 96, 0.333);
}

.btn2--outline {
    color: #a80b57;
    background: linear-gradient(var(--angle), rgba(97, 56, 216, 0) 33.3%, #a80b57 66.6%, #b85886 85%, rgba(231, 67, 149, 0.9)) no-repeat -1px 50%/300% calc(100% + 2px);
}

.btn2--outline:after {
    content: "";
}

.btn2--outline:hover,
.btn2--outline:focus {
    color: white;
}

.btn2--outline:hover:after,
.btn2--outline:focus:after {
    opacity: 0;
}