.inspiration-head{
    width: min(1200px, 100%);
    padding-inline: clamp(12px, 4vw, 20px);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-top: var(--space-lg);

    h1{
        font-size: var(--font-size-xxl);
        text-align: center;
        margin: 0;
    }

    span{
        font-size: var(--font-size-sm);
        font-weight: 400;
        text-align: center;
        text-align: left;
    }
}

.inspiration-colors{
    width: min(1200px, 100%);
    padding-inline: clamp(12px, 4vw, 20px);
    margin-inline: auto;
    overflow-x: auto;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
    
    display: flex;
    gap: var(--space-lg);

    @media (min-width: 970px) {
        justify-content: center;
    }

    .element{
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        cursor: pointer;
        align-items: center;
    }

    span{
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-align: center;
    }

    .circle{
        width: 70px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: white;
        padding: 2px;
    }

    .circle.selected, .circle:hover{
        background: linear-gradient(to right, red, orange);
        background: linear-gradient(to right, #493240, #FF0099);

    }

    .circle-color{
        border: 4px solid white;
        width: 100%;
        aspect-ratio: 1;
        border-radius: var(--radius-round);
    }
    .clr-red{
        background: linear-gradient(to right, #93291e, #ed213a);
    }

    .clr-blue{
        background: linear-gradient(to right, #0072ff, #00c6ff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    .clr-nude{
        background: linear-gradient(to right, #ffc371, #ff5f6d);
    }

    .clr-purple{
        background: linear-gradient(to right, #734b6d, #42275a);
    }

    .clr-all{
        background: linear-gradient(45deg, #ffcccb 0%, #fff4ca 33%, #d4f0c9 66%, #cce5ff 100%);
    }


    .clr-green{
        background: linear-gradient(to right, #38ef7d, #11998e);
    }

    .clr-pink{
        background: linear-gradient(to right, #b91d73, #f953c6);
    }

    .clr-warm{
        background: linear-gradient(to right, #ed8f03, #ffb75e);
    }

    .clr-metal{
        background: linear-gradient(to right, #eaeaea, #dbdbdb, #ddd7b8, #d9cb85);
    }

    .clr-monokrom{
        background: linear-gradient(to right, #a2a2a2, #000000);
    }

}

.inspiration-grid{
    width: min(1200px, 100%);
    margin-inline: auto;
    overflow-x: auto;
    padding-bottom: var(--space-lg);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding-inline: var(--space-xs);
    gap: var(--space-xs);

    @media (min-width: 500px) and (max-width: 700px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media (min-width: 701px) and (max-width: 900px) {
        grid-template-columns: repeat(4, 1fr);
    }

    @media (min-width: 901px) {
        grid-template-columns: repeat(5, 1fr);
    }

    a{
        margin: 0;
        padding: 0;
        display: flex;

        img{
            width: 100%;
            aspect-ratio: 1;
        }
    }
}

.inspiration-button{
    width: min(1200px, 100%);
    margin-inline: auto;
    padding-bottom: var(--space-lg);
    display: flex;
    justify-content: center;
    align-items: center;

    button:last-child{
        display: none;
    }

    img{
        padding-inline: 40px;
        height: 24px;
        display: flex;
    }
}

.inspiration-button.disabled{
    button:last-child{
        display: flex;
    }
    button:first-child{
        display: none;
    }
}

main{
    background: var(--color-bg-alt);
}