/*-----------------Smaller Gap Height------------------*/

.storeBtnContent > .text-m-bold {
    line-height: 120%;
}

.storeBtnContent > .text-xs {
    line-height: 120%;
    font-size: 0.75rem; /* 12px / 16px = 0.75rem */
}

/*-----------------Light------------------*/

button.storeBtn {
    background: var(--gradient) var(--primary);
    color: var(--black);
    border: 0;
    display: flex;
    min-width: 13.625rem; /* 218px / 16px = 13.625rem */
    padding: 0.625rem 1rem 0.625rem 0.625rem; /* 10px / 16px = 0.625rem, 16px / 16px = 1rem */
    align-items: center;
    gap: 0.5rem; /* 8px / 16px = 0.5rem */
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
}

.storeBtns a,
.storeBtns a:link,
.storeBtns a:visited,
.storeBtns a:active {
    color: var(--black);
}

button.storeBtn path {
    fill: var(--black);
}

button:hover.storeBtn {
    cursor: pointer;
    background: var(--yummy);
}

.storeBtnContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
}

/*-----------------Dark------------------*/

button.storeBtnDark {
    background: var(--black);
    fill: var(--white);
    border: 0;
    display: flex;
    min-width: 13.625rem;
    padding: 0.625rem 1rem 0.625rem 0.625rem;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    color: var(--white);
}

button.storeBtnDark path {
    fill: var(--white);
}

button:hover.storeBtnDark {
    cursor: pointer;
    background: #2e2e2e;
    border: 0;
    display: flex;
    min-width: 13.625rem;
    padding: 0.625rem 1rem 0.625rem 0.625rem;
    align-items: center;
    gap: 0.5rem;
}

/*-----------------Responsive------------------*/

@media screen and (max-width: 1024px) {
    button.storeBtn svg,
    button.storeBtnDark svg {
        width: 2.125rem; /* 34px / 16px = 2.125rem */
        height: auto;
    }
    
}