@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";

.shop {
    --bulma-box-color: yellow;
}

:root{

}

.mainsection{
    --h: 348;
    --s: 86%;
    --l: 61%;
    --a: 0.1;
    --bg: linear-gradient(96deg, #f14668 4.28%, #ff5a5c 51.66%, #f1a246 100%);
    --bd-width: 0.125em;
    --radius: 0.75em;
    --p: 1em;
    --icon: var(--bulma-danger);
    background: var(--bg);
    border-radius: calc(var(--bd-width) + var(--radius));
    box-shadow: 0 .5em 1em 0 hsla(var(--h),var(--s),var(--l),var(--a)),0 1em 2em 0 hsla(var(--h),var(--s),var(--l),var(--a));
    padding: var(--bd-width);
    transition-duration: var(--bulma-duration);
    transition-property: box-shadow,transform;
    max-width: 90%;
    margin: auto;
}

.mainsection.blue{
    --bg: linear-gradient(96deg, #669aff 4.28%, #3bd5ff 51.18%, #3affff 100%);
    --h: 220;
    --icon: hsl(var(--h),var(--s),var(--l));

}

.mainsection.green{
    --bg: linear-gradient(96deg,#38d58e 11.31%,#89f072 58.45%,#bef055 103.75%);
    --h: 160;
    --icon: hsl(var(--h),var(--s),var(--l));
}

.mainsection.white{
    --bg: linear-gradient(96deg,#c5c5c5 11.31%,#dcdcdc 50.53%,#a4a4a4 103.75%);
    --h: 348;
    --s: 6%;
    --icon: hsl(var(--h),var(--s),var(--l));
}


.sectioncontent{
    align-items: center;
    background-color: var(--bulma-scheme-main);
    border-radius: var(--radius);
    column-gap: var(--p);
    display: grid;
    grid-template-columns: auto 1fr;
    padding: var(--p) calc(var(--p)*1.25);
}

a{
    text-decoration: none;
    color: var(--bulma-link-text)
}

.icon {
    color:var(--icon);
    grid-row: 1/span 2;
}